skills.rest
X-manist
X-manistCOMMUNITY
Explore all skills by this author →
GitHub

gsap-scrolltrigger

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

Updated Jul 16, 2026
Search Tags:#frontend#javascript#gsap#pinning#parallax#scrolltrigger#scroll animation
One-click install
npx skills add https://github.com/X-manist/Cohmira --skill gsap-scrolltrigger-x-manist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/X-manist/Cohmira/tree/main/src/builtin-plugins/openmontage/.agents/skills/gsap-scrolltrigger
Command: npx skills add https://github.com/X-manist/Cohmira --skill gsap-scrolltrigger-x-manist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Building scroll-driven animations such as parallax effects, pinned sections, and scroll-scrubbed timelines requires precise control over trigger positions, scroll progress, and cleanup, which is error-prone when done manually. ## Core Features & Use Cases - Scroll-Linked Animations: Tie tweens and timelines to scroll position using start/end triggers, toggleActions, and scrub for progress-linked playback. - Pinning and Horizontal Scroll: Pin sections during scroll ranges and build fake horizontal scroll experiences with containerAnimation. - Batching and 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 pins a full-viewport section, scrubs a timeline of element animations as the user scrolls 2000px, and cleans up all ScrollTriggers on route change in a React SPA. ## Quick Start Use the gsap-scrolltrigger skill to create a pinned section that scrubs a timeline of element animations 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 create a scroll-triggered animation with GSAP ScrollTrigger?▼

Register the plugin with gsap.registerPlugin(ScrollTrigger), then add a scrollTrigger config object to a tween or timeline with trigger, start, and end properties. Use toggleActions for play/reverse behavior or scrub to link animation 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 using ScrollTrigger.getAll() or ScrollTrigger.getById().

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. Also note that pinning and snapping are not available on ScrollTriggers that reference a containerAnimation.

Why do ScrollTrigger positions break after loading content dynamically?▼

ScrollTrigger calculates positions at creation and only auto-refreshes on viewport resize. Call ScrollTrigger.refresh() after DOM or layout changes such as new content, images, or fonts, and create triggers in top-to-bottom page order or set refreshPriority.

Related Skills

Explore More Software Engineering Skills→
Adham7843Adham7843

scroll-reveal-libraries

Add scroll-triggered reveal animations to web elements with Animate On Scroll.

Community
Basic
nangyak4415-sudonangyak4415-sudo

optimize

Identify and fix web performance issues in frontend applications.

Community
Intermediate
hanzoaihanzoai

gsap-react

Implement GSAP animations in React with useGSAP and automatic cleanup.

Official
Intermediate
fyunusafyunusa

scroll-reveal-libraries

Implement scroll-triggered animations with AOS data attributes.

Community
Basic