useTrigger

Creates a Trigger which can be used in tandem with the triggers property to trigger animations on desired actions.

page.tsx

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

export default function Page() {

    const click = useTrigger();

    return <Animatable animate={{ rotate: ['0deg', '360deg'] }} triggers={[{ on: click }]}>
        <div
            onClick={click}
            style={{
                width: 100,
                height: 100,
                borderRadius: 4,
                backgroundColor: 'var(--clr-accent)',
                cursor: 'pointer'
            }} />
    </Animatable>;
}

Call signature

1 
const trigger = useTrigger()

Returns

trigger Trigger

A Trigger which can be used inside the triggers property to trigger an animation.