What is a step wipe?
A step wipe is a scroll-driven chapter sequence that holds one screen in place while the page scrolls underneath it. Every step brings a photo, a one-word title, a two-digit number and a sentence. As the reader scrolls, the next step's photo wipes down over the current one — on two layers at once: a dimmed, blurred, zoomed backdrop that fills the screen and a sharp 3:2 card in the middle — while a thin progress line fills along the top.
The titles sit in a row of equal columns: step one's title in the first column, step two's in the second and so on, so the reader always knows how far along the sequence they are. When a wipe passes its threshold the old title's letters slide out, the new one's slide in with a tiny stagger, the number rolls like an odometer and the sentence swaps beneath a mask.
When to use it
- A product line — one chapter per model, colour or material.
- A collection or a season — the editorial opener of a lookbook.
- Chapters of a story — a numbered path through a long piece.
- Disciplines, venues, destinations — anything that comes in three to five strong pictures with a word each.
- A cinematic break — a pinned, full-screen pause between two text-heavy sections.
How it works
The widget is a tall scroll track — one screen per step plus one — with a sticky stage inside it. Your position inside the track becomes a progress value; the progress line's fill scales with it. The same value picks which wipe is under way: the photo layers below it are fully shown, the ones above it are fully hidden, and the one in between is clipped from the bottom in proportion, so it appears to roll down over the step before. The backdrop and the card are clipped together, so the whole screen changes at once.
The texts do not follow the wipe pixel by pixel. They switch with a hysteresis — at 75% of a wipe when scrolling forward and at 25% when scrolling back — so a reader hovering around a boundary never sees the title flicker. On a switch the outgoing title's characters slide up and the incoming ones slide in from below (the directions reverse when scrolling back), each digit of the number rolls to its new value, and the sentence slides out and the next one in after a short beat. Scrolling is scrubbed through a brief catch-up ease, so fast flicks still feel smooth.
On phones the title sits top-left, the number top-right, the card spans the width with a small margin and the sentence sits bottom-left. Readers who prefer reduced motion get the states without the slides.
Best practices
- Three to five steps — each adds a full screen of scroll by default; shorten the pace when the section sits between text.
- Use one strong photo per step with the subject near the centre: it has to survive the blurred full-screen backdrop and the 3:2 card.
- One-word titles — they share a row, and the columns get narrow with more steps.
- Keep each sentence to one line of thought; it sits in a 340px box on desktop.
- Pick a card size to taste: small leaves more backdrop, large makes the photo the hero.
How to make one — free
Edit the steps above
Set each step's title, description and photo — upload your own.Pick the feel
The pace (how much scroll each step takes), the card size, numbers on or off, colours.Embed or download
Copy the embed code or save the self-contained HTML file — or build a whole story in Scrollytelling.
Templates that use a step wipe
Want a head start? These ready-made, fully-editable templates put the step wipe to work — customize one and publish in minutes.
Step wipe — frequently asked questions
Is the step wipe free?
Yes — customize and export it here with no account.
Does it work on phones?
Yes. The stage pins the same way; the title moves to the top-left, the number to the top-right, the card fills the width and the sentence sits at the bottom.
How many steps can I add?
Up to eight; three to five reads best, because every step adds a screen of scroll and the titles share one row.
Can I scroll back?
Yes — the wipes, the titles, the numbers and the sentences all reverse. The texts switch a little later on the way back so they never flicker at a boundary.