Scrollgesteuertes Erzählen

Verwandelt Scrollen in klare Produktzustände bei erhaltener natürlicher Bedienung und zugänglicher Ersatzdarstellung.

scroll-based-storytelling

Teammitglieder mit diesem Skill

AgentPixel

Entdecke, wie der Skill hilft

Wann ist der Skill hilfreich?

Nutze diesen Skill für schrittweise visuelle Produkterklärungen.

Wobei hilft er dir?

Definiert Fokusobjekt und Erzählabschnitte vor Effekten.
Nutzt unterstützte Scrollanimation ohne Navigationsfallen.
Passt Bewegung und Layout für unterschiedliche Geräte an.

Das könntest du fragen

Erstelle einen vierstufigen Produktdurchgang mit Scrollsteuerung und lesbarer statischer Ansicht bei reduzierter Bewegung. Springe direkt zum dritten Abschnitt und wechsle auf Telefonbreite. Jeder Erzählschritt bleibt lesbar, ohne dass eine fixierte Szene normales Scrollen blockiert.

Ausführliche Dokumentation

Hier findest du die ursprüngliche Anleitung, Beispiele und Prüfschritte des Skills in ihrer Originalsprache.

Details…Weniger anzeigen

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:

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.
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.
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.

Enthaltene Dateien 1

SKILL.md