useSpring

page.tsx

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

export default function Page() {

    const spring = useSpring([0, 0]);

    return <Animatable animate={{ translate: spring(([x, y]) => `${x}px ${y}px`) }}>
        <div
            onClick={() => {
                spring.set([Math.random() * 300 - 150, Math.random() * 200 - 100]);
            }}
            style={{
                width: 100,
                height: 100,
                borderRadius: 4,
                backgroundColor: 'var(--clr-accent)',
                cursor: 'pointer'
            }} />
    </Animatable>;
}

Call signature

1 
const spring = useSpring<T extends number | number[]>(initial, { stiffness, damping, mass, restThreshold })

Parameters

initial: number | number[]

The initial value/values of the spring.

stiffness?: number

The stiffness of the spring.
default = 2

damping?: number

The damping of the spring between 0 and 1.
default = 0.1

mass?: number

The amount of mass attached to the spring.
default = 1

restThreshold?: number

The threshold for the velocity of the spring, below which the spring stops animating and is considered to be at rest.
default = 0.01

Returns

link Link<any>

A link which can be used inside the animate property to create an animation.