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.


Grow

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.


Grow

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.

Hover

Options

All property options passed in the <> are supported.

Hover