jscottsmith/react-scroll-parallax
React Scroll Parallax
React Scroll Parallax is a component library and JavaScript animation tool for creating scroll-driven visual effects and layered depth in web applications. It supplies shared scroll metrics and controller access down the component tree through context providers, applying hardware-accelerated style changes such as translation, rotation, and opacity to animate elements. The system tracks element positions relative to viewport boundaries to calculate continuous scroll ratios while batching calculations to sync with browser refresh rates and automatically recomputing layouts during dynamic content updates.
The library supports horizontal axis configuration, custom start and end triggers, and global switches to disable calculations based on device conditions or user preferences. It handles nested scroll container binding rather than defaulting to the main window, and provides layout cache invalidation for dynamic asset loading and page route transitions. Additional capabilities include precise starting and ending transform values, easing curves, and layered banner structures that clip overflow while moving background elements at varying speeds.
Features
- Parallax Effects - Creating smooth scrolling parallax effects and layered visual depth on web pages using React components and hooks.
- Element - Translates, rotates, scales, and fades elements relative to page scroll progress using timeline animations.
- Parallax Libraries - A component library for adding smooth scroll-driven parallax visual effects and animations to elements in React applications.
- Scroll Progress Ratios - Measures a target element's position relative to the viewport boundaries to calculate a continuous scroll ratio.
- Viewport Progress Tracking - Tracks an element's position relative to viewport boundaries to calculate continuous scroll progress ratios.
- CSS Transform Animations - Applies hardware-accelerated style changes like translation, rotation, and opacity to create smooth parallax movement.
- Visual Property Transformations - Applies CSS transformations like opacity, scale, and rotation driven by scroll progress with optional easing curves.
- Parallax Context Providers - Supplies shared scroll metrics and controller access down the component tree through context providers.
- React UI Component Libraries - A library of reusable user interface components and hooks designed for web applications.
- Scroll-Driven Animation Tools - Animating website elements like opacity, scale, and position based on the user's scroll progress through the page.
- Scroll Target Bindings - Applies movement and visual changes to page elements based on scroll position by linking a reference to a target component.
- Scroll Effects - Controls the global scroll state and coordinates parallax updates across multiple elements on the page.
- JavaScript Animation Libraries - A library for creating scripted visual animations and motion effects in web applications.
- Scroll Speed Adjustments - Changes the relative speed of elements during scrolling to create visual depth and layering.
- Precise Scroll Transforms - Specifies exact starting and ending transform values to finely control element positions during scroll interactions.
- Container Bindings - Binds parallax calculations to a specific DOM element instead of the main document when content scrolls inside a nested container.
- Scroll Animations - Controls global scroll timelines and manages performance across multiple parallax elements on the page.
- Scroll Progress Boundaries - Establishes custom start and end triggers and external targets to adjust how scroll animation progress is calculated.
- Scroll Container Delegations - Binding scroll progress calculations to specific internal DOM containers rather than defaulting to the main window.
- Scroll State Controllers - Manages shared scroll state and synchronizes animation timelines across multiple elements throughout the application.
- Layered Banner Containers - Creates a scrolling banner container that clips overflow and moves background elements at varying speeds during page scroll.
