Scrollytelling
This implements scroll-driven storytelling where content reveals and animates as users scroll down the page. It covers the five standard techniques (graphic sequences, animated transitions, pan and zoom, moviescroller effects, and show-and-play), plus layout patterns like side-by-side sticky graphics and full-width sections. The skill prioritizes native CSS scroll-timeline API for simple effects and recommends GSAP ScrollTrigger for complex pinning scenarios. One thing to know: scrollytelling gets 400% longer time-on-page than static content, but it requires real narrative structure and good visuals to work. Don't use it just to add scroll effects. The Pudding and NYT Snow Fall are the canonical examples here.
- install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.
- 9
- skills.sh installs
- 391
- GitHub stars
- 40
- last updated
- Aug 21, 2026
Install
$ npx -y skills add doodledood/claude-code-plugins --skill scrollytelling --agent claude-codeInstalls into .claude/skills of the current project.
Files
Scrollytelling Skill
Build scroll-driven narrative experiences that reveal content, trigger animations, and create immersive storytelling as users scroll.
What is Scrollytelling?
Definition: "A storytelling format in which visual and textual elements appear or change as the reader scrolls through an online article." When readers scroll, something other than conventional document movement happens.
Origin: The New York Times' "Snow Fall: The Avalanche at Tunnel Creek" (2012), which won the 2013 Pulitzer Prize for Feature Writing.
Why it works: Scrollytelling exploits a fundamental psychological principle—humans crave control. Every scroll is a micro-commitment that increases engagement. Users control the pace, creating deeper connection than passive consumption.
Measured impact:
- 400% longer time-on-page vs static content
- 67% improvement in information recall
- 5x higher social sharing rates
- 25-40% improved conversion completion
Core Principles
1. Story First, Technology Second
The biggest mistake is leading with technology instead of narrative. Scrollytelling should enhance the story, not showcase effects.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/doodledood/claude-code-plugins
- Category
- DevOps & CI/CD
- First seen
- Jun 3, 2026
Recommended
More DevOps & CI/CD
simplify-and-harden-cipskoett/pskoett-ai-skillsCI-only Simplify & Harden workflow for pull requests using gh-aw (GitHub Agentic Workflows). Runs headless scan-and-report checks for simplify/harden/document, 391skills.sh installs
postgres-hybrid-text-searchtimescale/pg-aiguideUse this skill to implement hybrid search combining BM25 keyword search with semantic vector search using Reciprocal Rank Fusion (RRF). **Trigger when user asks391skills.sh installs
briefalirezarezvani/claude-skills/cs:brief <topic> — Generate a one-page strategy brief from an office-hours intake. First step in the strategic sprint pipeline. Use when a strategic question n390skills.sh installs
list-builderjwynia/agent-skillsBuild comprehensive randomization lists for creative entropy. Use when you need to create or expand lists of story elements (professions, locations, objects, na390skills.sh installs
instrumentcomet-ml/opik-skillsAdd Opik tracing to an existing codebase. Detects language (Python/TypeScript), identifies LLM frameworks, adds appropriate decorators and integrations, marks e389skills.sh installs
cloudflare-agentssecondsky/claude-skillsBuild AI agents on Cloudflare Workers with MCP integration, tool use, and LLM providers.389skills.sh installs