Skip to main content
Version: 4.0 Beta

React Scroll Parallax

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​

With npm

npm install react-scroll-parallax
Try 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.

npm install react-scroll-parallax@beta

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​