Scroll website design: plan motion around the story

Summary: Scroll website design

Start with a useful linear page. Divide the story into clear chapters, add motion only where it explains change, and provide a stable reduced-motion path. Keep native scrolling, meaningful headings, direct links, keyboard access, and selectable text.

Use scrollytelling for a product mechanism, data story, process, case study, or narrative that benefits from a controlled sequence. Choose conventional pages and navigation when visitors need to compare, scan, search, or jump between independent tasks.

Build the experience in six layers. Define the story, divide it into chapters, map scroll behavior, add motion, test real inputs, and ship a readable fallback.

Know the main scroll patterns

The term covers several patterns with different design and engineering costs. Name the intended pattern before collecting references or choosing a library.

Long page

ordinary vertical content with sections, anchors, and a clear reading order.

Reveal on scroll

an element appears or changes after entering the viewport.

Sticky scrollytelling

explanatory steps move beside a pinned visual that updates by chapter.

Parallax

foreground and background layers move at different rates to imply depth.

Scroll-scrubbed sequence

scroll progress controls an animation, frame sequence, chart, or product view.

Horizontal segment

vertical input advances a sideways story, gallery, or timeline.

Infinite feed

more items load near the end of the current list. This is browsing behavior, not a narrative by itself.

Choose scroll for a specific job

Scroll works when progress through the page matches progress through the idea. It can connect cause and effect, compare states, reveal a system, or pace an editorial story. The movement should carry meaning rather than delay access to it.

Product story

reveal parts, states, or outcomes in the order a buyer needs them.

Data explanation

keep one chart or map visible while the narrative changes its focus.

Case study

connect the problem, decisions, evidence, and result through clear chapters.

Process

show how inputs become outputs without separating each step onto another page.

Portfolio

use restrained movement to support the work instead of competing with it.

Avoid a complex scroll sequence for account tasks, dense comparison, documentation, search results, forms, or repeated workflows. These jobs benefit from predictable navigation, stable controls, and direct access to a known destination.

Write the static story first

Create a complete semantic document before storyboarding animation. A reader should understand the page when scripts fail, motion is reduced, images load slowly, or assistive technology presents the content as a linear outline.

1. 1State one audience, one page goal, and one action that marks success.
2. 2Write the core argument as a short sequence with a beginning, change, evidence, and conclusion.
3. 3Give every chapter a heading, useful copy, and a stable anchor link.
4. 4Mark the visual change that helps explain each chapter. Remove decorative changes without a clear job.
5. 5Define the mobile and reduced-motion reading order before designing the animated version.
6. 6Prototype the static page and test comprehension before adding movement.

Storyboard states and transitions

A scroll storyboard is closer to an interaction specification than a video timeline. It must explain what remains in the document, what becomes sticky, when a state changes, how progress reverses, and what appears without motion.

State

the visible content and visual condition for a chapter.

Trigger

viewport entry, chapter activation, or explicit scroll progress.

Range

the section of the scroll distance assigned to the transition.

Direction

behavior when the reader scrolls forward, backward, or jumps by anchor.

Fallback

the static image, text, table, or stacked sequence that carries the same meaning.

Acceptance check

the observable result a reviewer can verify on supported inputs.

Choose the smallest implementation

Use normal document flow and CSS for the foundation. Add capability only when the story needs it. Progressive enhancement keeps the content usable across browsers, devices, inputs, and loading conditions.

• Semantic HTML and anchors for structure, reading order, links, and search discovery.
• CSS position sticky for a visual that remains beside scrolling chapter text.
• Intersection Observer for coarse entry, exit, lazy loading, or active-chapter changes.
• CSS scroll-driven timelines for supported progress-linked and view-linked animation.
• A tested JavaScript animation system for complex choreography that cannot fit the simpler layers.
• Canvas, video frames, or WebGL only when the visual result justifies asset, rendering, and device cost.

MDN documents CSS scroll-driven timelines, scroll and view progress, browser fallbacks, and their performance advantages over main-thread scroll handlers.

Preserve native scrolling

The page should respond to a wheel, trackpad, touch, keyboard, scrollbar, anchor link, find command, and assistive navigation. Do not replace the browser's scroll distance with a surprising fixed step or trap the reader inside a scene.

• Keep the scrollbar meaningful and let readers move forward or backward at their chosen pace.
• Keep focus visible when sticky visuals or navigation occupy part of the viewport.
• Provide chapter links for long stories and update the URL only when it helps sharing or history.
• Place essential text in the document instead of drawing it into canvas frames or background images.
• Test zoom, text resizing, rotated devices, short viewports, large pointers, and on-screen keyboards.

Design a reduced-motion version

Scroll-triggered movement can cause dizziness, nausea, headaches, or distraction. Respect the operating-system motion preference and offer a visible control when the experience contains extensive non-essential movement.

• Replace parallax and large spatial movement with static placement or a short opacity change.
• Present each narrative state as readable content rather than removing information with the animation.
• Pause or stop movement that continues beside other content and lasts beyond the applicable threshold.
• Store a site-level motion choice when a reader changes it, and make the control easy to find again.
• Test the reduced version as a complete experience instead of treating it as an error path.

W3C's guidance for animation from interactions explains motion sensitivity, parallax risk, reduced-motion preferences, and controls for non-essential movement.

Set a performance budget

A scroll story can feel broken before it looks slow. Missing frames, delayed input, shifting sections, and blank media interrupt the relationship between the reader's movement and the response. Test representative devices and network conditions.

Asset budget

limit image sequences, video, fonts, textures, and 3D resources before production begins.

Render budget

favor transform and opacity changes, and control the number and size of promoted layers.

Main-thread budget

avoid continuous layout reads, large callbacks, and competing scroll listeners.

Loading plan

preload only the next essential state and provide useful placeholders for delayed media.

Layout stability

reserve media dimensions and refresh measurements after fonts, images, resize, or content changes.

Fallback plan

keep a complete readable path when an effect is unsupported or too costly for the device.

web.dev's rendering guide explains the browser pipeline, compositor-friendly work, layer management, and causes of slow visual updates.

Design mobile as its own composition

A desktop pinned scene rarely becomes a good phone experience through scaling alone. Short viewports, browser controls, touch momentum, rotation, network cost, and device heat change the design boundary.

• Stack text and visuals when a side-by-side sticky layout becomes cramped.
• Shorten pinned distances and avoid hiding the exit from a section.
• Reduce asset resolution and scene complexity for smaller screens and constrained devices.
• Use touch targets and controls that do not depend on hover or fine pointer movement.
• Retest after rotation and dynamic viewport changes rather than relying on the initial measurement.

Use a design-to-development workflow

1. 1Brief the audience, message, action, evidence, constraints, motion policy, and performance boundary.
2. 2Write and approve the static chapter structure with real content.
3. 3Storyboard meaningful states, triggers, reverse behavior, and fallbacks.
4. 4Prototype one representative difficult section before producing the full page.
5. 5Build the semantic page, then layer sticky behavior, observation, and animation in that order.
6. 6Test content, inputs, accessibility, motion, responsiveness, performance, analytics, and failure states.
7. 7Ship behind measured acceptance criteria and review real sessions for confusion or abandonment.

Measure comprehension, not scroll depth alone

Scroll depth shows movement through a page, not understanding or satisfaction. Pair it with chapter visibility, meaningful action completion, navigation use, errors, performance data, reduced-motion selection, and short usability sessions.

• Can the intended reader explain the main idea after one pass?
• Can they find a specific chapter without replaying the whole sequence?
• Does the motion clarify a change that static content did not show as well?
• Do completion and action rates improve without worse accessibility or performance outcomes?
• Do readers reverse, stall, or abandon at the same animated boundary?

Use the animated websites guide for broader motion patterns, review criteria, and examples beyond scroll-driven pages.

Release checklist

• Every chapter remains understandable with motion and scripts disabled.
• Headings, landmarks, links, focus order, labels, and text alternatives match the visual story.
• Wheel, trackpad, touch, keyboard, scrollbar, anchors, zoom, find, and browser history behave predictably.
• Reduced motion removes non-essential spatial movement and retains the complete message.
• Mobile, short viewport, slow network, low-power device, resize, and rotation checks pass.
• Assets, rendering, layout stability, and main-thread work stay within the agreed budget.
• Analytics record useful outcomes without collecting unnecessary personal data.

Frequently asked questions