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.