skills.rest
zamansepeti43
zamansepeti43COMMUNITY
Explore all skills by this author →
GitHub

gsap-scrolltrigger

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

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

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 Animation: Tie tweens and timelines to scroll position with start/end triggers, toggleActions, and scrub for direct scroll-driven progress. - 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 and refresh best practices. ## 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 plugin with gsap.registerPlugin(ScrollTrigger), then add a scrollTrigger config 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. 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 on unmount. Alternatively, kill instances manually in a useEffect cleanup via ScrollTrigger.getAll() or ScrollTrigger.getById().

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

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

Why do my ScrollTrigger positions break after content loads?▼

Dynamic content, images, or fonts change layout after ScrollTrigger calculates positions. Call ScrollTrigger.refresh() after such changes; viewport resize is handled automatically but DOM mutations are not.

Should I use scrub or toggleActions on a ScrollTrigger?▼

Use scrub for animations whose progress follows scroll position directly, and toggleActions for discrete play/reverse behavior at boundaries. Never combine both on the same trigger; if both exist, scrub wins.

Related Skills

Explore More Software Engineering Skills→
utsavm81098utsavm81098

gsap-core

Provide GSAP core tween methods and matchMedia for framework-agnostic animations.

Community
Intermediate
skyf0xxskyf0xx
26

gsap-scrolltrigger

Create scroll-linked animations and pinning with GSAP ScrollTrigger.

Community
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