Orqestria Download
← Back to Website builders

Skill · Version 1.0.0

Scroll-based storytelling

Turns scrolling into a clear sequence of product states while preserving native control and accessible fallback content.

scroll-based-storytelling

Team members using this skill

See how it helps

When is it useful?

Use when explaining a product through a progressive visual walkthrough.

What does it help you do?

  • Defines one focal object and distinct narrative beats before choosing effects.
  • Uses supported scroll-linked animation or scoped timelines without trapping navigation.
  • Adapts motion and layout so the explanation remains usable across devices.

Try asking this

Create a four-step product walkthrough driven by scrolling, with readable static content when reduced motion is enabled. Jump directly to the third section and resize to phone width. Every narrative step must remain readable without a pinned scene trapping ordinary scrolling.

Detailed documentation

Read the skill’s original instructions, examples and checks in their authored language.

Details…Show less

Scroll-Based Storytelling

Scroll-linked scenes turn a static page into a user-paced narrative where scrolling scrubs through progressive product states. Keep the user in control of the scrollbar at all times—never hijack native scroll physics without a clear escape hatch.

Narrative Choreography Before Effects

Structure every scroll story around clear beats rather than simultaneous visual noise:

  1. Establish the anchor element: Keep one primary focal object (e.g., an interactive product frame, architectural diagram, or device viewport) stable while surrounding callouts and internal UI states evolve step by step.
  2. One visual change per beat: Sequence transformations (Step 1: problem context $\rightarrow$ Step 2: action triggered $\rightarrow$ Step 3: live state transition $\rightarrow$ Step 4: measurable outcome) with breathing room (scroll distance buffer) between steps so fast scrollers still register each takeaway.
  3. Progressive disclosure over scroll-jacking: Let native browser scrolling drive timeline progress (scrub: true or CSS animation-timeline: view()). Never trap wheel/touch events in custom scroll locks that prevent the user from scrolling past a section.

Implementation Patterns: CSS Scroll Timelines & JS Scrubbing

Scenario Recommended Approach Key Implementation Rules
Progress bars, parallax headers, card reveal on enter (view()) CSS Scroll-Driven Animations (animation-timeline: scroll() / view()) with @supports (animation-timeline: view()) progressive enhancement Runs entirely on the compositor thread with zero main-thread scroll jitter
Multi-step pinned product walkthrough with synchronized copy and UI state changes Timeline Scrubbing (e.g., gsap.timeline({ scrollTrigger: { trigger, pin, scrub, start, end } }) or IntersectionObserver step state machine) Attach scrollTrigger to the parent timeline (never to individual child tweens inside a timeline)
Narrative text blocks triggering discrete interactive states in a sticky preview pane position: sticky + IntersectionObserver thresholds Avoids JS pinning wrappers; clean fallback on narrow mobile viewports

Edge Cases Every Scroll Scene Must Handle

  • Mid-page reload & deep-link jumps (#hash): Users frequently refresh halfway down the page or jump via anchor links. Ensure timelines compute initial progress immediately on mount and after fonts/images settle (ScrollTrigger.refresh()).
  • Fast scroll & reverse scroll: Scrubbed timelines must be 100% reversible (onEnter, onLeave, onEnterBack, onLeaveBack). Avoid imperative one-way DOM mutations inside scroll callbacks that break when the user scrolls back up.
  • Responsive breakpoint adaptation: A 4-column pinned desktop showcase often overcrowds a 375px mobile screen. Use gsap.matchMedia() or CSS @media queries to switch mobile viewports to a stacked sticky-header or swipeable step layout when vertical height is constrained.
  • Reduced-motion fallback: When prefers-reduced-motion: reduce is active, disable continuous scroll scrubbing and pinning distance multipliers; display each narrative stage as a clean, readable static section or instant state switch.

Included files 1

  • SKILL.md