Skills
.Work. You
Rest

design-scroll-storytelling

Community

Build scroll-driven storytelling experiences.

Design & Creative#storytelling#accessibility#gsap#framer-motion#parallax#scroll#css-scroll-timeline
Authorscanady
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Designers and developers need a cohesive, cinematic approach to scroll-driven narratives that combines parallax, sticky sections, and interactive storytelling without building bespoke ecosystems from scratch.

Core Features & Use Cases

  • Guided storytelling architecture with a beat-based sequence (Hook, Context, Journey, Climax, Resolution) to structure content.
  • Library guidance for GSAP ScrollTrigger, Framer Motion, Locomotive Scroll, Lenis, and CSS scroll-timeline, with recommendations on when to use each.
  • Implementation patterns including parallax layers with speed ratios, scroll-triggered reveals, sticky sections, and horizontal scrolling sections.
  • Accessibility and performance best practices, including reduced motion support and transform/opacity-only animations, plus mobile-friendly fallbacks.

Quick Start

Begin by outlining your scroll narrative and selecting a primary library (GSAP ScrollTrigger, Framer Motion, or CSS scroll-timeline) to implement the beat structure.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-scroll-storytelling
Download link: https://github.com/scanady/nexus-agents/archive/main.zip#design-scroll-storytelling

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.