Skip to main content

Easing Animation

You can provide easing presets or cubic-bezier curve params to the useParallax hook or <Parallax /> component.

Example using a preset

This translateX effect will be eased using the easeOutQuad preset.

function Component() {
const parallax = useParallax<HTMLDivElement>({
easing: 'easeOutQuad',
translateX: [0, 100],
});
return <div ref={parallax.ref} />;
}
important

When defining an easing prop like above, ALL provided CSS effects will be eased.

Default

Eased!

Custom cubic-bezier

Define a custom cubic-bezier curve by providing the 4 params to the easing prop.

function Component() {
const parallax = useParallax<HTMLDivElement>({
easing: [1, -0.75, 0.5, 1.34],
translateX: [0, 100],
});
return <div ref={parallax.ref} />;
}

Default

Eased!

Independent Easing

Each effect can define it's own easing by passing a third param to the effect.

function Component() {
const parallax = useParallax<HTMLDivElement>({
translateX: [0, 100, 'easeOutQuint'],
translateY: [-100, 100, 'easeInQuint'],
});
return <div ref={parallax.ref} />;
}

Default

Eased!