Animate

Fully automated cascading animations based on a list of Clips or ClipProperties.

page.tsx

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
import { Animate } from '@infinityfx/lively';

export default function Page() {

    return <Animate triggers={[{ on: 'mount' }]}>
        <div style={{
            width: 200,
            height: 200,
            borderRadius: 4,
            backgroundColor: 'var(--clr-primary-200)',
            display: 'flex',
            flexDirection: 'column',
            gap: 10,
            padding: 10
        }}>
            {new Array(3).fill(0).map((_, i) => {
                return <div key={i} style={{
                    width: 180,
                    height: 53,
                    borderRadius: 4,
                    backgroundColor: 'var(--clr-accent)'
                }} />
            })}
        </div>
    </Animate>;
}

Properties

The Animate component inherits most of its properties from the Animatable component, except for the animations, animate, inherit and order properties.

animations?: Clip[] | ClipProperties[]

A list of animations to play per cascade level, with the first animation in the list corresponding to the outermost layer. When the levels property is higher than the amount of animations in the list it will use the last animation in the list for the remaining levels. By default the Move and Pop animations from @infintiyfx/lively/animations are used.
default = [Move, Pop]

levels?: number

The number of levels down it should cascade animations.
default = 2