skills.rest
umairshahid622
umairshahid622COMMUNITY
Explore all skills by this author →
GitHub

gsap-scrolltrigger

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Building scroll-driven animations from scratch requires manual scroll event handling, position calculations, and layout management. This Skill provides the correct patterns for GSAP ScrollTrigger so you can trigger tweens on scroll, pin sections, scrub timelines to scroll position, and build fake horizontal scroll effects without common pitfalls. ## 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 progress. - Pinning and Horizontal Scroll: Pin sections during scroll ranges and build fake horizontal scroll using containerAnimation with the required ease: "none" pattern. - Batching and Custom Scrollers: Use ScrollTrigger.batch() for staggered reveal animations and scrollerProxy() to integrate third-party smooth-scroll libraries. - Use Case: A landing page needs a hero section pinned while content scrolls horizontally, plus cards that fade in as they enter the viewport. This Skill provides the exact ScrollTrigger configuration, refresh handling, and React cleanup patterns to implement it correctly. ## 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 ScrollTrigger 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 GSAP 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 GSAP 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 ScrollTrigger.getById().

Why is my GSAP horizontal scroll animation out of sync?▼

The horizontal tween used with containerAnimation must use ease: "none" so scroll position maps 1:1 to horizontal movement. Any other ease breaks the synchronization between vertical scroll and horizontal position.

Why does ScrollTrigger fire at wrong positions after content loads?▼

ScrollTrigger calculates positions on creation and on viewport resize, but dynamic content, images, or fonts change layout afterward. Call ScrollTrigger.refresh() after DOM or layout changes to recalculate trigger positions.

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 trigger boundaries. Do not combine both on the same ScrollTrigger; if both exist, scrub wins.

Related Skills

Explore More Software Engineering Skills→
Probably-GroupProbably-Group
3

gsap

Guide GSAP implementations with safe DOM targeting and structured orchestration.

Official
Advanced
greensockgreensock
13.3k

gsap-react

Integrate GreanSock animations into React and Next.js apps using the useGSAP hook with automatic cleanup on unmount.

Official
Intermediate
calesthiocalesthio
55.1k

gsap-scrolltrigger

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

Community
Intermediate
andersoncollabandersoncollab

scroll-animations

Implement CSS scroll-driven animations with scroll() and view() timelines.

Community
Intermediate