# rrutsche/react-parallax

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/rrutsche-react-parallax).**

876 stars · 75 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/rrutsche/react-parallax
- awesome-repositories: https://awesome-repositories.com/repository/rrutsche-react-parallax.md

## Description

React Parallax is a React animation component library that creates multi-speed scrolling background depth effects. It computes relative scroll positions within viewports to translate raw page offsets into normalized animation progress values, applying hardware-accelerated translation and scaling styles to DOM nodes for smooth visual movement.

The library supports rendering background images and arbitrary visual elements that shift positions at different speeds relative to foreground content. It provides dynamic Gaussian blur filter transitions that interpolate based on current scroll velocity and position. 

Child components and custom animations are driven through a render-props composition pattern, which exposes raw scroll percentage values for custom page transformations and dynamic visual customization.

## Tags

### Part of an Awesome List

- [Parallax Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/react-animation-libraries/parallax-libraries.md) — Provides React-specific components for creating multi-speed scrolling background depth effects and custom transformations.
- [CSS Animation Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/css-animation-libraries.md) — Provides a React animation library applying hardware-accelerated styles for smooth movement.

### User Interface & Experience

- [Parallax Effects](https://awesome-repositories.com/f/user-interface-experience/parallax-effects.md) — Displays scrolling background visuals that move at different speeds to create depth. ([source](https://github.com/rrutsche/react-parallax/blob/master/README.md))
- [Gaussian Blur Implementations](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/blur-effects/gaussian-blur-implementations.md) — Interpolates Gaussian blur filter values dynamically during scroll interactions.
- [React Animation Workflows](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/physics-motion-dynamics/physics-based-animations/react-animation-workflows.md) — Builds interactive user interface animations driven by scroll positions in React.
- [React Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components.md) — Offers reusable React UI components designed to render layered background elements and scroll animations.
- [Render Props](https://awesome-repositories.com/f/user-interface-experience/dom-manipulation-libraries/declarative-rendering-frameworks/render-props.md) — Exposes internal state via render props for flexible custom component rendering.
- [Parallax Backgrounds](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-layout-styling/parallax-backgrounds.md) — Renders background images and elements that shift positions during page scrolling. ([source](https://github.com/rrutsche/react-parallax/tree/master/lib))
- [Scroll Progress Mapping](https://awesome-repositories.com/f/user-interface-experience/scroll-animations/scroll-progress-mapping.md) — Computes relative scroll positions to map page offsets into normalized animation progress values.
- [Scroll-Driven Animation Tools](https://awesome-repositories.com/f/user-interface-experience/scroll-driven-animation-tools.md) — Synchronizes visual transitions and dynamic blur filter effects with the user's scroll position.
- [Blur Effects](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/blur-effects.md) — Applies dynamic blur filter transitions based on scroll velocity.
- [Background Customization](https://awesome-repositories.com/f/user-interface-experience/background-customization.md) — Embeds arbitrary visual nodes behind scrolling content for background design flexibility. ([source](https://github.com/rrutsche/react-parallax#readme))
- [Animated Backgrounds](https://awesome-repositories.com/f/user-interface-experience/background-effects/animated-backgrounds.md) — Creates dynamic background visuals that shift positions relative to the foreground.
- [Percentage-Based Position Calculators](https://awesome-repositories.com/f/user-interface-experience/coordinate-based-position-calculators/percentage-based-position-calculators.md) — Exposes raw scroll percentage values for custom page transformations. ([source](https://github.com/rrutsche/react-parallax#readme))
- [Scroll Wrapper Components](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/scroll-event-controllers/scroll-wrapper-components.md) — Wraps children in scroll-position tracking components that expose raw percentages for custom visual transformations.
- [Viewport Intersection Events](https://awesome-repositories.com/f/user-interface-experience/viewport-intersection-events.md) — Monitors element positions relative to the viewport using event listeners.

### Graphics & Multimedia

- [Scroll-Driven Transition Effects](https://awesome-repositories.com/f/graphics-multimedia/custom-animation-effects/ui-transition-effects/scroll-driven-transition-effects.md) — Adjusts image sharpness dynamically during scrolling to create gradual focus effects. ([source](https://github.com/rrutsche/react-parallax/blob/master/README.md))