React Scroll Parallax

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

Read the documentation for setup and usage instructions.

• Usage
• Usage with NextJS 13
• How it works

Demos

• Storybook v3 - Source Code
• Demo 1 - Source Code
• Horizontal Scroll - Source Code
• Full Page Banner - Source Code
• Demo 2 - Source Code (old 2.x version)

Docs: Hooks

• useParallax()
• useParallaxController()

Docs: Components

• <Parallax>
• <ParallaxBanner>
• <ParallaxProvider>