skills.rest
KKChen666
KKChen666COMMUNITY
Explore all skills by this author →
GitHub

gsap-scrolltrigger

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

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

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 ease, missing refresh, misordered triggers) 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 playback. - Pinning & Horizontal Scroll: Pin sections during scroll ranges and build fake horizontal scroll using containerAnimation with the required ease: "none" pattern. - Batching & Custom Scrollers: Use ScrollTrigger.batch() for staggered viewport reveals and scrollerProxy() to integrate third-party smooth-scroll libraries. - Use Case: A developer building a landing page wants a section pinned while content slides horizontally as the user scrolls vertically; this Skill provides the exact pinned containerAnimation pattern plus cleanup guidance for React via useGSAP(). ## Quick Start Ask the AI to create a GSAP ScrollTrigger animation that pins a section and scrubs a timeline as the user scrolls.

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

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.

Does ScrollTrigger work 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 are my ScrollTrigger positions wrong after loading content?▼

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

Can I use ScrollTrigger with a smooth scrolling library?▼

Yes, use ScrollTrigger.scrollerProxy() to override how ScrollTrigger reads and writes scroll position for the custom scroller. You must also register ScrollTrigger.update as a listener on the third-party scroller so calculations stay synchronized.

Related Skills

Explore More Software Engineering Skills→
yonetim258852yonetim258852

gsap-scrolltrigger

Create scroll-driven animations with GSAP and ScrollTrigger for DOM, SVG, Canvas, and WebGL.

Community
Advanced
SharmaAnurag99SharmaAnurag99

gsap-scrolltrigger

Create scroll-driven animations and pin elements with GSAP ScrollTrigger.

Community
Intermediate
aesthezelaesthezel
8

gsap-core

Create GSAP tweens, timelines, and scroll-driven animations in JavaScript.

Community
Advanced
fyunusafyunusa

scroll-reveal-libraries

Implement scroll-triggered animations with AOS data attributes.

Community
Basic