skills.rest
alexejluft
alexejluftCOMMUNITY
Explore all skills by this author →
GitHub

scrolling-with-purpose

Enforce GSAP ScrollTrigger, React, and Lenis scroll animation best practices.

Updated Aug 27, 2026
Search Tags:#web development#react#animation#gsap#lenis#scrolltrigger
One-click install
npx skills add https://github.com/alexejluft/brudi --skill scrolling-with-purpose
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scrolling-with-purpose
Source: https://github.com/alexejluft/brudi/tree/main/skills/scrolling-with-purpose
Command: npx skills add https://github.com/alexejluft/brudi --skill scrolling-with-purpose

SYSTEM DOCUMENTATION & REQUIREMENTS

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 fromTo or 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.

Frequently Asked Questions about scrolling-with-purpose

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate Lenis smooth scrolling with GSAP ScrollTrigger without scroll position errors?▼

Proper GSAP animation cleanup in React requires using the useGSAP hook to automatically revert contexts. This prevents memory leaks and silent bugs by ensuring tweens and timelines are destroyed when React components unmount.

What is the best way to animate the same property sequentially in GSAP without caching issues?▼

Implementing horizontal scrolling with GSAP involves using ScrollTrigger pinning and scrubbing. This technique locks the viewport vertically while translating content horizontally, tying horizontal movement directly to the vertical scroll progress.

Can I use CSS Scroll-Driven Animations instead of GSAP for simpler scroll effects?▼

You can use CSS Scroll-Driven Animations as an alternative to GSAP for simpler scroll effects. This native browser approach reduces JavaScript overhead and is suitable when complex timeline sequencing or smooth scrolling integration is not required.

Why does my GSAP ScrollTrigger animation break when using Lenis for smooth scrolling?▼

GSAP ScrollTrigger animations break with Lenis because native scroll events are intercepted. Fixing this requires explicitly linking Lenis scroll updates to the ScrollTrigger update cycle, ensuring scroll positions remain synchronized.

Related Skills

Explore More Software Engineering Skills→
darkroomengineeringdarkroomengineering
41

lenis

Set up Lenis smooth scroll in Next.js/React projects with provider and useLenis hook.

Official
Intermediate
hii-saikrishnahii-saikrishna

gsap-scrolltrigger

Create scroll-triggered animations using GSAP and ScrollTrigger libraries.

Community
Advanced
yequdesuyequdesu

gsap-frameworks

Animate UI components in Vue, Svelte, and non-React frameworks with GSAP lifecycle hooks.

Community
Intermediate
deomiarndeomiarn

animation-library

Implement UI animations with Framer Motion, CSS, and scroll-triggered effects.

Community
Intermediate