Skill LibraryPrompt Skill1 DesignsTop Views

Scroll Story Section Contract

Design, audit, or implement scrollytelling, sticky graphic, pinned narrative, step-triggered visuals, and scroll explainer sections with chapter purpose, static fallback, reduced motion, accessible reading order, performance, and desktop/mobile QA.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines8

Reusable instruction lines for generation.

Author@Interface Lab

Animation

Skill Directive

Description

TagsAnimation

Skill Prompt

- Use for scrollytelling, scroll stories, sticky graphics, pinned narratives, Scrollama, ScrollTrigger story sections, scroll-scrubbed product explanations, and step-based scroll reveals; inputs must include page role, story goal, chapter list, visual/media states, stack, accessibility targets, and performance budget.
- Run a fit decision first: use scroll narrative only when scroll explains sequence, causality, data state, product behavior, or spatial relationship; avoid it for long forms, checkout, settings, data tables, legal text, API docs, and urgent workflows.
- Write the chapter contract: each chapter answers one question, headings and body copy stay in normal document flow, and CTAs are not hidden in intermediate frames or precision-scroll states.
- Choose the motion model: static sticky graphics are safest; step triggers use IntersectionObserver/Scrollama; continuous scrub is only for true continuous state; pinned sections stay short and skippable; video/canvas sequences need static keyframes.
- Choose the technical path: CSS sticky and CSS scroll-driven animations for light enhancement; Scrollama for chapter enter/exit; GSAP ScrollTrigger for complex pin/scrub/timelines; Lenis only when WebGL/parallax sync truly requires it.
- Design fallback first: no-JS shows all chapters and representative visuals; reduced motion disables scrub, parallax, smooth scroll, and autoplay; mobile can become static keyframes or vertical cards.
- Avoid per-scroll setState; prefer transform, opacity, CSS variables, and clip-path, and clean up IntersectionObservers, ScrollTriggers, Lenis, RAF, media decoders, and event listeners.
- Deliver a fit decision, chapter contract, motion model, technical path, fallback/a11y, performance budget, and QA checklist; verify desktop, mobile touch, keyboard, anchors, back/restore, reduced motion, no horizontal overflow, and unmount cleanup.

Public directive summary shown; Pro unlocks the full prompt.

Layout Info

Designs below are ordered by views. Top items use live previews; the rest stay fast thumbnail cards.

Unlock Pro All Skills

Scroll Story Section Contract

More pages using Scroll Story Section Contract