Grow animation
Create a "grow" CSS animation effect right in the HTML code
Overview
The grow alias scales (grows) the element from the value of 0 to the 1. This is useful for scenarios like creating cascading reveal animations on various triggers like hover or inview.
When using the default values of the grow alias, then initial scale is set to 0, so the element is not visible. As a result, triggers like hover or click cannot be directly applied to the element itself. Instead, apply the hover or click triggers with the target parameter.
Syntax
Default
The default grow parameters:
| Name | Start value (default) | End value | Accepted values |
|---|---|---|---|
grow |
0 |
1 |
0-1 |
Custom values
You can change the initial (starting) value and customize its options.
Examples
These examples show the grow alias in action using the hover trigger, but you can use any of the supported triggers.
Default
By default, the grow 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 0.5.
Options
All property options passed in the <> are supported.