What is scrollytelling?

Scrollytelling is a web design technique where visual and textual elements change or animate as a user scrolls, creating a narrative experience that increases user engagement and information recall.

How does it handle accessibility and motion sensitivity?

The skill includes standard patterns for detecting 'prefers-reduced-motion' settings, ensuring that animations are simplified or disabled for users with vestibular disorders.

Does this skill support modern CSS features?

Yes, it prioritizes native CSS Scroll-Driven Animations (available in modern browsers as of 2025) for maximum performance and reduced CPU usage.

Which animation libraries can I use with this skill?

It supports a variety of stacks including GSAP ScrollTrigger for complex timelines, Framer Motion for React projects, and vanilla JavaScript with IntersectionObserver for lightweight needs.

Scrollytelling & Narrative Scroll

Name: Scrollytelling & Narrative Scroll
Author: doodledood

bydoodledood

•

디자인 도구

Builds immersive, scroll-driven storytelling experiences with pinned sections, progressive reveals, and narrative-linked animations.

소개

The Scrollytelling skill enables Claude to architect and implement complex narrative web experiences where visual elements react to user scroll behavior. It provides expert guidance on choosing the right implementation strategy—ranging from high-performance native CSS Scroll-Driven Animations to complex GSAP ScrollTrigger timelines. By focusing on story-first development and accessibility, it helps developers create high-engagement landing pages, data visualizations, and interactive articles that include sticky layouts, parallax effects, and progressive content reveals while ensuring smooth performance and reduced-motion support.

주요 기능

Accessibility-first design with built-in reduced-motion fallbacks
Multi-directional scroll and parallax depth configurations
GSAP ScrollTrigger and Framer Motion timeline orchestration
8 GitHub stars
Implementation of 'sticky' side-by-side narrative layouts
Native CSS Scroll-Driven Animation and IntersectionObserver patterns

사용 사례

Building interactive data journalism or long-form narrative articles
Developing immersive portfolio sites with progressive content reveals
Creating high-conversion, story-driven product landing pages

소개

주요 기능

Accessibility-first design with built-in reduced-motion fallbacks
Multi-directional scroll and parallax depth configurations
GSAP ScrollTrigger and Framer Motion timeline orchestration
8 GitHub stars
Implementation of 'sticky' side-by-side narrative layouts
Native CSS Scroll-Driven Animation and IntersectionObserver patterns

사용 사례

Building interactive data journalism or long-form narrative articles
Developing immersive portfolio sites with progressive content reveals
Creating high-conversion, story-driven product landing pages