Get started

Installing

1 
npm install @infinityfx/lively

Importing

Lively exports two components from @infinityfx/lively, the Animatable and Animate components.

1 
import { Animatable, Animate } from '@infinityfx/lively';

In addition Lively also exports from three submodules; @infinityfx/lively/layout, @infinityfx/lively/hooks and @infinityfx/lively/animations. These submodules can be used in tandem with the main module and provide extra utilities to help create more complex animations.

1 
import { Typable, Morph, LayoutGroup } from '@infinityfx/lively/layout';

It is important to note that the Animate, Typable and Morph components all build upon the Animatable component, extending its functionality. This means that these components also inherit the properties and functionality of the Animatable component.

Usage

Play a simple fading animation when the component mounts.

page.tsx

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
import { Animatable } from '@infinityfx/lively';

export default function Page() {

    return <Animatable animate={{ opacity: [0, 1] }} triggers={[{ on: 'mount' }]}>
        <div style={{
            width: 100,
            height: 100,
            borderRadius: 4,
            backgroundColor: 'var(--clr-accent)'
        }} />
    </Animatable>;
}

Staggering

When an Animatable component has multiple children, the animations for these can be staggered. The stagger and staggerLimit properties allow you to control the delay and cutoff limit for these animations respectively. In the example below the first 3 children each have a delay of 0.1 seconds between their animations, followed by the last 3 children which animate all at once.

page.tsx

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

export default function Page() {

    return <Animatable animate={{ opacity: [0, 1] }} triggers={[{ on: 'mount' }]} stagger={0.1} staggerLimit={4}>
        <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr 1fr',
            gap: 8
        }}>
            {new Array(6).fill(0).map((_, i) => {
                return <div key={i} style={{
                    width: 100,
                    height: 100,
                    borderRadius: 4,
                    backgroundColor: 'var(--clr-accent)'
                }} />;
            })}
        </div>
    </Animatable>;
}

Cascading

Animatable components can be nested as direct or indirect children of eachother. By default nested Animatable components will each behave independently, however if a child component has the inherit property set, it will inherit it's parent's properties and behaviour. Each subsequent layer of nested children will play the same animation as it's parent, starting after the parent animation has finished. When playing an animation in reverse, this cascading will also happen in reverse. Playing the inner most child's animation first, cascading outwards. Nested children may also specify their own properties, if you want to override a certain inherited property.

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 
import { Animatable } from '@infinityfx/lively';

export default function Page() {

    return <Animatable animate={{ opacity: [0, 1] }} triggers={[{ on: 'mount' }]}>
        <div style={{
            width: 180,
            height: 100,
            borderRadius: 4,
            backgroundColor: 'var(--clr-primary-200)'
        }}>
            <Animatable inherit animate={{ translate: ['0% 0%', '100% 0%'] }}>
                <div style={{
                    width: 80,
                    height: 80,
                    borderRadius: 4,
                    backgroundColor: 'var(--clr-accent)',
                    margin: 10
                }} />
            </Animatable>
        </div>
    </Animatable>;
}