LayoutGroup

A utility component that allows for animating any child components when they unmount or change layout. To animate between layout changes child components need to have their adaptive property set to true. Child components that you want to play an unmount animation need to have an id property set, as well as have atleast one 'unmount' trigger set.

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 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
import { useState } from 'react';
import { Animatable } from '@infinityfx/lively';
import { LayoutGroup } from '@infinityfx/lively/layout';

export default function Page() {

    const [state, setState] = useState<string[]>([]);

    return <LayoutGroup>
        <div style={{
            display: 'flex',
            flexDirection: 'column',
            gap: 8
        }}>
            {state.map((val, i) => {
                return <Animatable adaptive id={val} key={val} animate={{ opacity: [0, 1] }} triggers={[{ on: 'mount' }, { on: 'unmount', reverse: true }]}>
                    <div style={{
                        width: 100,
                        height: 20,
                        backgroundColor: val,
                        borderRadius: 4,
                        textAlign: 'center',
                        fontSize: '.8em',
                        cursor: 'pointer'
                    }} onClick={() => {
                        const updated = state.slice();
                        updated.splice(i, 1);

                        setState(updated);
                    }}>
                        Remove
                    </div>
                </Animatable>
            })}

            <Animatable adaptive id="button">
                <button onClick={() => {
                    const updated = state.slice();
                    updated.push('#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0'));

                    setState(updated);
                }} style={{
                    width: 100,
                    backgroundColor: 'var(--clr-primary-200)',
                    border: 'none',
                    color: 'var(--clr-text)',
                    paddingBlock: 6,
                    borderRadius: 4,
                    cursor: 'pointer'
                }}>Add</button>
            </Animatable>
        </div>
    </LayoutGroup>;
}

Properties

transition?: { duration?: number; easing?: Easing; reverse?: boolean; }

The animation config to use for layout change animations.
default = { duration: 0.5, easing: 'ease', reverse: false }