scroll-animations
CommunityShip scroll-linked animations with pure CSS.
Software Engineering#accessibility#css#parallax#prefers-reduced-motion#scroll-driven animations#animation timeline#reveal on scroll
Authorandersoncollab
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Scroll-based animations often cause jank and complex JavaScript scroll handlers; this Skill solves that by using native CSS scroll-driven animations for smoother, more maintainable effects.
Core Features & Use Cases
- Scroll timeline animation without JS: Build scroll-linked progress and motion using animation-timeline: scroll() and view().
- Production-ready patterns: Includes animation-range control, parallax, reveal-on-scroll entrances/exits, sticky header effects, and scroll-snap horizontal galleries.
- Performance and accessibility guardrails: Uses compositor-safe guidance (transform/opacity only) and mandatory prefers-reduced-motion handling with @supports feature detection plus IntersectionObserver fallback.
Quick Start
In your page styles, wrap scroll-driven animation rules in an @supports (animation-timeline: scroll()) block and disable/simplify them for prefers-reduced-motion: reduce.
Dependency Matrix
Required Modules
None requiredComponents
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: scroll-animations Download link: https://github.com/andersoncollab/design-agent/archive/main.zip#scroll-animations Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.