skills.rest
Dhruv-Ghanchi
Dhruv-GhanchiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-scrolltrigger

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

Updated Jul 26, 2026
Search Tags:#frontend#gsap#pinning#parallax#scrolltrigger#scrub#scroll animation
One-click install
npx skills add https://github.com/Dhruv-Ghanchi/Portfolio-Webiste --skill gsap-scrolltrigger-dhruv-ghanchi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/Dhruv-Ghanchi/Portfolio-Webiste/tree/main/.agents/skills/gsap-scrolltrigger
Command: npx skills add https://github.com/Dhruv-Ghanchi/Portfolio-Webiste --skill gsap-scrolltrigger-dhruv-ghanchi

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 configuration of the GSAP ScrollTrigger plugin, and common mistakes (wrong ease, missing refresh, scrub mixed with toggleActions) break layouts. ## Core Features & Use Cases - Scroll-Linked Animations: Tie tweens and timelines to scroll position with start/end triggers, toggleActions, and scrub for scroll-driven progress. - Pinning & Horizontal Scroll: Pin sections during scroll ranges and build fake horizontal scroll using containerAnimation with ease: "none". - Batching & Custom Scrollers: Use ScrollTrigger.batch() for staggered viewport-entry animations and scrollerProxy() to integrate third-party smooth-scroll libraries. - Use Case: A developer building a portfolio landing page pins a full-viewport section, scrubs a multi-step timeline as the user scrolls 2000px, and animates cards entering the viewport in batches. ## Quick Start Use the gsap-scrolltrigger skill to pin a section and scrub a timeline animation as the user scrolls through 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 pin for 1000px of scroll. Keep pinSpacing at its default true so a spacer prevents layout collapse, and animate children 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 on unmount. Alternatively, kill instances manually in a useEffect cleanup with ScrollTrigger.getAll().forEach(t => t.kill()).

Why is my horizontal scroll animation out of sync with ScrollTrigger?▼

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

When should I not use scrub and toggleActions together?▼

Never combine them on the same ScrollTrigger; they represent conflicting behaviors and scrub wins if both are present. Use scrub for scroll-linked progress and toggleActions for discrete play/reverse triggers.

Related Skills

Explore More Software Engineering Skills→
yyykkkunyyykkkun

gsap-scrolltrigger

Create scroll-linked web animations using GSAP's ScrollTrigger plugin.

Community
Intermediate
greensockgreensock
13.3k

gsap-scrolltrigger

Create scroll-linked animations and parallax effects with GSAP ScrollTrigger.

Official
Advanced
josippapezjosippapez

gsap-scrolltrigger

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

Community
Intermediate
fyunusafyunusa

scroll-reveal-libraries

Implement scroll-triggered animations with AOS data attributes.

Community
Basic