Shrink animation
Create a "shrink" CSS animation effect right in the HTML code
Overview
The shrink alias scales (shrinks) the element from the given value to the default value of 1. This is useful for scenarios like creating cascading reveal animations on various triggers like hover or inview.
Syntax
Default
The default shrink parameters:
| Name | Start value (default) | End value |
|---|---|---|
shrink |
2 |
1 |
Custom values
You can change the initial (starting) value and customize its options.
Examples
These examples show the shrink alias in action using the hover trigger, but you can use any of the supported triggers.
Default
By default, the shrink alias scales the element to 0, so it is not visible. In this case, the hover trigger has the parent parameter which applies the hover event to the nearest parent element.
Custom values
Customize the initial scale value of the element by passing the custom value into the alias parenthesis (). In these cases, the custom value is 1.5.
Options
All property options passed in the <> are supported.