Easing Animation

You can provide CSS timing functions or cubic-bezier curve params to the useParallax hook or <Parallax /> component.

Example using a timing function

This translateX effect will be eased using an ease-out quad curve (cubic-bezier).

function Component() {
  const parallax = useParallax<HTMLDivElement>({
    easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
    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, 'cubic-bezier(0.23, 1, 0.32, 1)'],
    translateY: [-100, 100, 'cubic-bezier(0.755, 0.05, 0.855, 0.06)'],
  });
  return <div ref={parallax.ref} />;
}

Default

Eased!