What Happens Between Two Steps
August 25, 2026
Transitions look like decoration and are not. Each one tells the viewer something about the relationship between what they just saw and what they are seeing now.
Getting that wrong is subtle: nothing looks broken, the demo is just harder to follow than it should be.
What each one means
- Cut — a new place. Right when the click navigated somewhere else.
- Pan or slide — the same place, moved. Right for scrolling down one page, and wrong for a navigation, which it makes look like one continuous screen.
- Fade — neutral, and safe when you are unsure. It says "next" without claiming a relationship.
- Zoom — closer to the same thing, not a different thing.
The common mistake
Using one transition everywhere because it looks consistent. That flattens real differences: a cut and a scroll become the same event, and the viewer loses track of whether they are on a new page or further down the old one.
Consistency is worth having in style, not in meaning. Matching the transition to what actually happened is what makes a demo followable.
Length matters more than type
A transition long enough to notice is too long. Six hundred to eight hundred milliseconds reads as motion; anything past a second reads as waiting, and it is paid on every step.
Across twelve steps a transition half a second too slow adds six seconds of nothing to a demo already fighting for attention.
Reduced motion is not optional
Some viewers have motion reduced at the operating-system level, and honouring that is both an accessibility requirement and simple courtesy. What matters is reducing the motion rather than removing the information.
A scroll that becomes a cut loses the fact that a scroll happened. Replace it with something static that says so instead — that is the difference between accommodating a preference and ignoring the viewer who set it.
Frequently asked questions
- Which transition should a demo use between steps?
- The one matching what happened: a cut for a navigation, a pan or slide for scrolling down the same page, a zoom for moving closer to the same thing, and a fade when you are unsure -- it says "next" without claiming a relationship.
- Should transitions be consistent throughout?
- In style, not in meaning. Using one everywhere flattens real differences -- a cut and a scroll become the same event, and the viewer loses track of whether they are on a new page or further down the old one.
- How long should a transition be?
- Six hundred to eight hundred milliseconds. Past a second it reads as waiting, and it is paid on every step -- half a second too slow across twelve steps is six seconds of nothing.
Keep reading
This is what Demorta does
Click through it — the same kind of demo you can record of your own product.
Try it on your own product
Record your first interactive demo free.
Five demos on the free plan, forever. No credit card, no trial countdown, no sales call. Install the Chrome extension, click through your product once, and you have a shareable link in about ten minutes.
Start free →