Interface Lab
Login
Back to knowledge
Interaction Responsive Motion

Award Site Scroll Story Motion

Scroll motion should help users understand product state and narrative progress, not hide information inside uncontrolled spectacle.

motionscrollcase-studyawwwards

Design Principle

Scroll motion in narrative pages must serve causality, hierarchy, and pacing: each motion segment should explain a state change or value proof.

Large Theory

Scroll storytelling is not about making a page long. It breaks the user's understanding path into a paced chain of evidence. Motion connects chapters, reveals state changes, and emphasizes key actions.

Small Points

  1. Each chapter answers one question: what it is, how it works, why it is credible, what the result is, and what comes next.
  2. Scrubbed video or canvas needs a static poster and reduced-motion fallback.
  3. Pinned sections should stay short and return to normal document flow.
  4. Core content cannot exist only inside a video frame, hover state, or intermediate scroll state.

Design Judgment

If users can stop scrolling and still understand the chapter, motion is supporting the information. If they only see an abstract scene, motion has overtaken the content.

Implementation Notes

Prefer transform, opacity, clip-path, CSS variables, or a mature animation library for scroll progress. Avoid continuously animating width, height, top, or left. Provide static keyframes for prefers-reduced-motion.

Counterexamples/Risks

Overlong pinning, unskippable video, scroll locking, poor touch feel on mobile, and content hidden behind transparent layers or canvas.

Case Study

Dayos received Awwwards Site of the Day, and its page lists highlights including scroll scrubbed video, form transition, header, services, storytelling, and CTA. The product context is enterprise productivity and multi-cloud operational AI, so scroll video and transitions can explain a complex system rather than decorate it. The useful pattern is turning abstract AI service value into a followable state demonstration while preserving a clear CTA.

Source Links

Awwwards Dayos: https://www.awwwards.com/sites/dayos

Agent Directive

Before using scroll storytelling, write the chapter question list and fallback plan; after implementation, check reduced motion, mobile touch, anchors, and static readability.