skills.rest
aungpwint
aungpwintCOMMUNITY
Explore all skills by this author →
GitHub

gsap-scrolltrigger

Implements scroll-linked animations, pinning, and scrubbing with GSAP ScrollTrigger.

Updated Aug 26, 2026
Search Tags:#javascript#gsap#pinning#parallax#scrolltrigger#scrub#scroll animation
One-click install
npx skills add https://github.com/aungpwint/presentation --skill gsap-scrolltrigger-aungpwint
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/aungpwint/presentation/tree/main/.agents/skills/gsap-scrolltrigger
Command: npx skills add https://github.com/aungpwint/presentation --skill gsap-scrolltrigger-aungpwint

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Building scroll-driven animations—triggering tweens on scroll, pinning sections, scrubbing timelines to scroll position, or creating fake horizontal scroll—requires precise ScrollTrigger configuration, and common mistakes (wrong start/end values, missing plugin registration, broken pinning) cause broken layouts and janky animations. ## Core Features & Use Cases - Scroll-Linked Animations: Tie tweens and timelines to scroll position with start/end triggers, toggleActions, and scrub for direct scroll-driven playback. - Pinning & Horizontal Scroll: Pin sections during scroll ranges and build fake horizontal scroll experiences using containerAnimation with ease: "none". - Advanced Patterns: Use ScrollTrigger.batch() for staggered viewport reveals, scrollerProxy() for third-party smooth-scroll integration, and proper refresh/cleanup for SPAs and React. - Use Case: A developer building a landing page wants a hero section pinned while content scrolls horizontally, plus fade-in animations as cards enter the viewport—this Skill provides the exact ScrollTrigger config patterns and best practices. ## Quick Start Ask the AI to create a GSAP ScrollTrigger animation that pins a section and scrubs a timeline as the user scrolls down the page.

Frequently Asked Questions about gsap-scrolltrigger

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

FAQPage Schema
How do I trigger a GSAP animation on scroll?▼

Register the plugin with gsap.registerPlugin(ScrollTrigger), then add a scrollTrigger config object to your tween with trigger, start, and end properties. Use toggleActions for play/reverse behavior or scrub to link progress directly to scroll position.

How to pin a section while scrolling with ScrollTrigger?▼

Set pin: true in the scrollTrigger config and define an end value like "+=1000" to control pin duration. ScrollTrigger adds pin spacing by default so layout does not collapse; animate children of the pinned element rather than the pinned element itself.

Can I use ScrollTrigger with React?▼

Yes, use the useGSAP() hook from the @gsap/react package to automatically revert and clean up ScrollTriggers when components unmount. Alternatively, manually kill instances in a useEffect cleanup using ScrollTrigger.getAll() or getById().

Why is my ScrollTrigger animation out of sync after content loads?▼

ScrollTrigger calculates positions on creation, so dynamic content, images, or fonts shift trigger positions. Call ScrollTrigger.refresh() after layout changes; viewport resize is handled automatically with a 200ms debounce.

Should I use scrub or toggleActions in ScrollTrigger?▼

Use scrub when animation progress should follow scroll position directly, and toggleActions for discrete play/reverse behavior at scroll boundaries. Never combine both on the same trigger—if both exist, scrub wins.

How do I create horizontal scroll sections with GSAP?▼

Pin a full-viewport section, animate an inner wrapper's x or xPercent with ease: "none", and attach ScrollTrigger with scrub. Use containerAnimation on nested triggers so they respond to the horizontal movement; pinning and snapping are unavailable on containerAnimation-based triggers.

Related Skills

Explore More Software Engineering Skills→
utsavm81098utsavm81098

gsap-core

Provide GSAP core tween methods and matchMedia for framework-agnostic animations.

Community
Intermediate
0monish0monish

gsap-scrolltrigger

Implement and troubleshoot GSAP ScrollTrigger animations in web UIs.

Community
Advanced
darkroomengineeringdarkroomengineering
41

lenis

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

Official
Intermediate
fyunusafyunusa

scroll-reveal-libraries

Implement scroll-triggered animations with AOS data attributes.

Community
Basic