# React Scroll Parallax

> React hooks and components for scroll-driven parallax effects via WAAPI (v4 beta).

Current docs target v4 beta (WAAPI / ScrollTimeline). Wrap your app in ParallaxProvider before using hooks or components. For v3 docs, use the version dropdown on the site.

## Table of Contents

- [Hooks](https://react-scroll-parallax.damnthat.tv/docs/v4/usage/hooks/hooks.md): Index of React hooks — useParallax and useParallaxController.
- [useParallaxController](https://react-scroll-parallax.damnthat.tv/docs/v4/usage/hooks/use-parallax-controller.md): React hook to access the ParallaxController instance for cache updates and advanced control.
- [useParallax](https://react-scroll-parallax.damnthat.tv/docs/v4/usage/hooks/use-parallax.md): React hook to apply scroll-driven parallax effects to a DOM element via ref.
- [Components](https://react-scroll-parallax.damnthat.tv/docs/v4/usage/components/components.md): Index of React components — Parallax, ParallaxBanner, and ParallaxProvider.
- [ParallaxBanner](https://react-scroll-parallax.damnthat.tv/docs/v4/usage/components/parallax-banner-component.md): ParallaxBanner component for layered parallax images and custom markup in a banner container.
- [Parallax](https://react-scroll-parallax.damnthat.tv/docs/v4/usage/components/parallax-component.md): Parallax component for applying scroll-driven CSS effects to a wrapper div around children.
- [ParallaxProvider](https://react-scroll-parallax.damnthat.tv/docs/v4/usage/components/parallax-provider.md): Root context provider required for all parallax hooks and components; configures scroll axis and container.
- [Advanced Banners](https://react-scroll-parallax.damnthat.tv/docs/v4/examples/advanced-banners.md): Advanced ParallaxBanner with translateY, scale, opacity, easing, and gradient overlay layers.
- [Parallax Banners](https://react-scroll-parallax.damnthat.tv/docs/v4/examples/banners.md): ParallaxBanner examples — single image, multi-layer, headline overlay, and embedded headline layers.
- [Custom Effects](https://react-scroll-parallax.damnthat.tv/docs/v4/examples/custom-effects.md): Custom scroll effects using onProgressChange to drive CSS variables and animate any property.
- [Easing Animation](https://react-scroll-parallax.damnthat.tv/docs/v4/examples/easing.md): Easing scroll effects with global easing props and per-effect cubic-bezier timing functions.
- [Horizontal Scroll](https://react-scroll-parallax.damnthat.tv/docs/v4/examples/horizontal-scroll.md): Horizontal scroll parallax setup with scrollAxis horizontal and layered background demo.
- [How it works](https://react-scroll-parallax.damnthat.tv/docs/v4/examples/how-it-works.md): How scroll parallax works — speed, progress relative to the viewport, and combined CSS effects.
- [Scroll Effects](https://react-scroll-parallax.damnthat.tv/docs/v4/examples/scroll-effects.md): Rotation and scale scroll effects on z-axis, y-axis, and per-axis scale with easing.
- [React Scroll Parallax](https://react-scroll-parallax.damnthat.tv/docs/v4/intro.md): Introduction to React Scroll Parallax v4 beta — install, quick examples, and links to usage docs.
- [Usage with Next.js](https://react-scroll-parallax.damnthat.tv/docs/v4/usage/next-13.md): Next.js 13+ App Router setup with ParallaxProvider as a client component.
- [Parallax Props](https://react-scroll-parallax.damnthat.tv/docs/v4/usage/parallax-props.md): Complete reference for parallax configuration props and CSS effect props accepted by hooks and components.
- [Usage](https://react-scroll-parallax.damnthat.tv/docs/v4/usage/usage.md): Setup guide — wrap your app in ParallaxProvider, then create effects with useParallax or Parallax.

## Migration Guides

- [Migration Guides](https://react-scroll-parallax.damnthat.tv/docs/migration-guides/index.md): Upgrade guides for React Scroll Parallax across major versions.
- [Upgrade to V2](https://react-scroll-parallax.damnthat.tv/docs/migration-guides/upgrade-to-v2.md): v1 to v2 migration guide — offset prop changes and progress calculation updates.
- [Upgrade to V3](https://react-scroll-parallax.damnthat.tv/docs/migration-guides/upgrade-to-v3.md): v2 to v3 migration guide — Parallax component prop changes and new features.
- [Upgrade to V4](https://react-scroll-parallax.damnthat.tv/docs/migration-guides/upgrade-to-v4.md): v3 to v4 migration guide — WAAPI easing changes, rootMargin removal, and API updates.