skills.rest
KryptaMedina7
KryptaMedina7COMMUNITY
Explore all skills by this author →
GitHub

gsap-scrolltrigger

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, @gsap/react.

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, bad cleanup) break layouts. ## Core Features & Use Cases - Scroll-Linked Animation: Tie tweens and timelines to scroll position with start/end triggers, scrub, and toggleActions. - Pinning & Horizontal Scroll: Pin sections during scroll and build fake horizontal scroll using containerAnimation with ease "none". - Batching & Custom Scrollers: Use ScrollTrigger.batch for staggered reveals and scrollerProxy for third-party smooth-scroll libraries. - Use Case: Pin a full-viewport section, scrub a timeline as the user scrolls 2000px, then clean up all ScrollTriggers when a React component unmounts using useGSAP. ## 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 ScrollTrigger plugin with gsap.registerPlugin(ScrollTrigger), then add a scrollTrigger config object to your tween or timeline 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. Animate children of the pinned element rather than the pinned element itself, and leave pinSpacing at its default true so layout does not collapse.

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 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 synchronization between vertical scroll and horizontal position.

Why do ScrollTrigger positions break after loading content?▼

ScrollTrigger calculates positions on creation and only auto-refreshes on viewport resize. After dynamic content, images, or fonts change the layout, call ScrollTrigger.refresh() manually to recalculate trigger positions.

Related Skills

Explore More Software Engineering Skills→
ScarletFishScarletFish

gsap-scrolltrigger

Synchronize GSAP tweens and timelines with browser scroll position.

Community
Intermediate
coastdigitalgroupcoastdigitalgroup
2

scroll-reveal-implementation

Trigger viewport-based entrance animations using IntersectionObserver with reduced-motion fallbacks.

Official
Intermediate
josippapezjosippapez

gsap-scrolltrigger

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

Community
Intermediate
andersoncollabandersoncollab

scroll-animations

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

Community
Intermediate