Does Step Wipe work in Next.js App Router?

Yes. The component includes the `'use client'` directive and uses `useGSAP` for proper cleanup across Server Component re-renders. Drop it into any page or component inside `app/`.

Does Step Wipe work with Server Components?

The component itself runs on the client (it needs the DOM for GSAP), but the parent page can be a Server Component. Import the component normally; React's "use client" boundary handles the rest. No additional configuration needed.

Does Step Wipe work in React 18 and React 19?

Yes. The component uses `useGSAP` which is React-version-agnostic. It also handles Strict Mode double-invocation correctly via `gsap.context` scoping.

Will the animation flash before hydration?

Brief flash is possible on first paint because GSAP needs the client to initialize. The component sets the parked ("starting") state via `gsap.set` on mount before the first frame, so any visible jump is sub-frame and rarely perceived. For above-the-fold use, pair with a CSS opacity:0 default that the component clears on mount.

GSAP component for React

Step Wipe in React.

A tall scroll-driven section that wipes between product steps as you scroll, with the background and the centred card clipping open together, and the title, step number and description swapping in sync at each step.

Framework guides

Install

Install Step Wipe in your React project

Step Wipe ships as a copy-paste React component. The only dependencies are GSAP and the official @gsap/react adapter for the useGSAP hook. Both work in Next.js (App Router and Pages), Vite, Remix, and Create React App.

BASH

Integrate

Where it goes in your React app

Step Wipe is a leaf-level interactive component, so it needs to render on the client. In a Next.js App Router project, add the 'use client' directive at the top of the file (it's already there in the component you copy).

The component is self-contained: it manages its own refs, useGSAP scope, and cleanup. Mount it inside any Server Component, Client Component, or page. It does not require a provider or wrapper.

If your project uses TypeScript, the component is typed - the props it accepts match the data-anm-* attributes documented on the main detail page.

Gotchas

The stage DOM is built imperatively, not with JSX

The bg/card layers, title grid, number roller and description are all created via document.createElement inside useGSAP and injected into the stageRef container. This mirrors the vanilla structure exactly so the scrub math and SplitText line-splitting stay identical across formats - it is not idiomatic React, but it is the correct approach for a scroll-scrubbed, imperatively-mutated stage.

steps is read once per mount via dependencies

Changing the steps array rebuilds the whole stage (it's in the useGSAP dependencies array). Passing a new array reference every render will thrash - memoize steps if you construct it dynamically.

One choreography everywhere, mobile is CSS-only

There is no separate mobile branch in JS - the same sticky scrub-driven stage runs at every viewport width. Mobile repositioning (title top-left, number top-right, description below the card) is pure CSS in step-wipe.css. Needs SplitText registered alongside ScrollTrigger for the description line masking.

FAQ

Common questions

Does Step Wipe work in Next.js App Router?: Yes. The component includes the 'use client' directive and uses useGSAP for proper cleanup across Server Component re-renders. Drop it into any page or component inside app/.
Does Step Wipe work with Server Components?: The component itself runs on the client (it needs the DOM for GSAP), but the parent page can be a Server Component. Import the component normally; React's "use client" boundary handles the rest. No additional configuration needed.
Does Step Wipe work in React 18 and React 19?: Yes. The component uses useGSAP which is React-version-agnostic. It also handles Strict Mode double-invocation correctly via gsap.context scoping.
Will the animation flash before hydration?: Brief flash is possible on first paint because GSAP needs the client to initialize. The component sets the parked ("starting") state via gsap.set on mount before the first frame, so any visible jump is sub-frame and rarely perceived. For above-the-fold use, pair with a CSS opacity:0 default that the component clears on mount.

Copy the React code

The full React implementation lives on the component page, with the live demo, every format side by side, and the ability to edit and re-run it in the browser.

Open Step Wipe

Step Wipe in React.

Install Step Wipe in your React project

Where it goes in your React app

Common questions

Copy the React code

Every component, in every framework.