Designing flows instead of static pages

Document-era websites were stacks of pages. Product experiences are sequences: curiosity → orientation → proof → action. Design the journey, then let scroll (or step) reveal it.

Scroll as timeline

Each viewport can behave like a beat—one idea, one mood, one ask. Trigger reveals slightly before content fully enters view so motion is underway when attention arrives.

Animate once on first reveal unless the story needs scrubbing. Replaying entrances on every bounce feels cheap and wastes frames.

Staggered in-view reveal

jsx

1import { motion } from 'motion/react';
2
3export function StaggerContainer({ children }) {
4  return (
5    <motion.div
6      initial="hidden"
7      whileInView="visible"
8      viewport={{ once: true, margin: '-80px', amount: 0.3 }}
9      variants={{
10        hidden: { opacity: 0 },
11        visible: {
12          opacity: 1,
13          transition: { staggerChildren: 0.1, delayChildren: 0.12 },
14        },
15      }}
16    >
17      {children}
18    </motion.div>
19  );
20}
21
22export function StaggerItem({ children }) {
23  return (
24    <motion.div
25      variants={{
26        hidden: { opacity: 0, y: 28 },
27        visible: {
28          opacity: 1,
29          y: 0,
30          transition: { duration: 0.5, ease: [0.25, 0.1, 0.25, 1] },
31        },
32      }}
33    >
34      {children}
35    </motion.div>
36  );
37}

Loading code…

Parallax with brakes on

Depth cues help storytelling when layers move at different rates—background slower, foreground closer to 1:1 scroll. Overshoot those ratios and you get motion sickness, not immersion.

Drive parallax with transform only. Never animate top/left for scroll linkage.

Parallax discipline

Background moves less than foreground—depth, not a carnival ride
One parallax hero per page is usually enough
Respect reduced motion: offer a static composition that still reads
If the copy still works with layers locked, the effect is optional

Link motion to scroll position

Time-based loops fight the user’s pace. Position-based motion—progress from 0 to 1 mapped to opacity, color, or scale—gives them authorship over the beat.

A light spring on top of raw progress softens jerky trackpads without stealing control.

Final thoughts

Flows win when every beat earns the next. Storyboard the sections on paper first; only then wire scroll, stagger, and scrubbing. If a flourish does not advance the journey, it is noise.

Motion building blocks

Simple pieces we compose into scroll stories

Live Preview

Fade In

CodeStep 1 of 4

1<motion.div
2  initial={{ opacity: 0 }}
3  whileInView={{ opacity: 1 }}
4  viewport={{ once: true }}
5  transition={{ duration: 0.5 }}
6>
7  Enter softly
8</motion.div>

Loading code…