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!