scrolling-with-purpose
CommunityMaster scroll animations with GSAP.
Authoralexejluft
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill addresses common pitfalls AI agents encounter when implementing scroll-based animations, particularly with GSAP, React, and Lenis, preventing silent bugs like memory leaks and incorrect scroll positioning.
Core Features & Use Cases
- React Cleanup: Ensures proper GSAP animation cleanup within React components using
useGSAP. - Lenis Integration: Correctly integrates Lenis smooth scrolling with GSAP ScrollTrigger to avoid scroll position errors.
- Horizontal Scroll: Provides guidance for implementing horizontal scrolling effects with pinning and scrubbing.
- Sequential Animations: Demonstrates how to animate the same property sequentially without caching issues, using
fromToor timelines. - CSS Alternatives: Highlights when to use CSS Scroll-Driven Animations for simpler effects.
Quick Start
Use the scrolling-with-purpose skill to implement GSAP animations with Lenis integration in a React component.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 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: scrolling-with-purpose Download link: https://github.com/alexejluft/brudi/archive/main.zip#scrolling-with-purpose 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 223,000+ vetted skills library on demand.