Back to the library
Pro

Step Wipe

A tall scroll-driven section that wipes between product steps, with the background and the centred card opening together and the text swapping in sync.

Open full screen

About this template

The stage pins while you scroll and each step wipes open from the top over the one before it. The background and the centred card are clipped separately, each by the same share of its own box, so the card reads as opening with the background rather than being sliced at the same screen height.

Title, step number and description sit outside the clipped layers and cross over once the wipe has passed halfway, so the caption never describes a picture that has already gone. A progress rule across the top tracks the whole sequence.

With reduced motion, or with no JavaScript at all, the section stays a plain vertical stack of full-height panels. Every image and every word is still there and still readable; only the wipe is missing. Scroll distance per step, and how much the scrub lags behind the scroll, are data attributes on the root.

Copy this template

This template is part of the Pro library. A subscription unlocks the whole catalogue, including the connection that puts it inside your builder.

Get access

Details

Category
Framework
Access

This template animates with GSAP core, ScrollTrigger. Install the free Bricksify Companion plugin and it loads on its own, or load the library yourself. Without it the section still renders, just without the motion.