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

•

Design Tools

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.

Key Features

01Accessibility-first design with built-in reduced-motion fallbacks

02Multi-directional scroll and parallax depth configurations

03GSAP ScrollTrigger and Framer Motion timeline orchestration

048 GitHub stars

05Implementation of 'sticky' side-by-side narrative layouts

06Native CSS Scroll-Driven Animation and IntersectionObserver patterns

Use Cases

01Building interactive data journalism or long-form narrative articles

02Developing immersive portfolio sites with progressive content reveals

03Creating high-conversion, story-driven product landing pages

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add doodledood/claude-code-plugins scrollytelling

For use in Claude.ai and ChatGPT

Download Skill