Skip to main content
Version: 4.0 Beta

React Scroll Parallax

Version

These docs describe v4 beta (WAAPI / ScrollTimeline). v3 docs are available via the version dropdown or by clicking the v3 docs link.

NPM Version Latest NPM Downloads Codecov

Test and Lint Storybook Storybook

React hooks and components to create scroll-driven parallax effects for banners, images, or any other DOM elements. Built on Parallax Controller, powered by the Web Animations API where each element is driven by a ScrollTimeline or ViewTimeline. Apply translate, rotate, scale, and opacity keyframes with scroll progress on the compositor and don't block the main thread.

Install​

4.0 Beta

Uses the latest Parallax Controller built with Web Animations API for scroll-driven animations.

If you're upgrading from V3, here's a migration guide to the v4 beta.

Note that Firefox does not support the Web Animations ViewTimeline API. You will need to use a polyfill.

npm install react-scroll-parallax@beta
Browser Support

Note that Firefox does not support the Web Animations ViewTimeline API. You will need to use a polyfill. It's currently behind a flag in Firefox and enabled by default in Firefox Nightly if you want to try it out.

Example​

Create effects with a hook:

function Component() {
  const parallax = useParallax({
    speed: -10,
  });
  return <div ref={parallax.ref} />;
}

or with a component:

function Component() {
  return (
    <Parallax speed={-10}>
      <div />
    </Parallax>
  );
}

Getting Started​

Demos​

Docs: Hooks​

Docs: Components​