skills.rest
Jatinkrmahato993203
Jatinkrmahato993203COMMUNITY
Explore all skills by this author →
GitHub

gsap-scrolltrigger

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

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

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 start/end values, animating pinned elements, missing refresh calls) cause broken layouts and jittery animations. ## 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 experiences using containerAnimation with ease: "none". - Batching & Integration: Use ScrollTrigger.batch() for staggered viewport-entry animations 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 ScrollTrigger config, pinning pattern, and cleanup steps to implement it correctly. ## Quick Start Use the gsap-scrolltrigger skill to pin a section and scrub a timeline as the user scrolls through it.

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 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 along with a start like "top top" and an end such as "+=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 scrub and toggleActions together in ScrollTrigger?▼

No, scrub and toggleActions should not be combined on the same ScrollTrigger. Scrub links animation progress continuously to scroll position, while toggleActions fire discrete play/reverse actions at boundaries; if both are present, scrub wins.

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, which is the most common cause of this issue.

How do I clean up ScrollTrigger in React?▼

Use the useGSAP() hook from the @gsap/react package, which automatically reverts and cleans up ScrollTriggers when the component unmounts. Alternatively, kill instances manually in a useEffect cleanup via ScrollTrigger.getAll().forEach(t => t.kill()) or ScrollTrigger.getById(id).kill().

Related Skills

Explore More Software Engineering Skills→
aesthezelaesthezel
8

gsap-core

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

Community
Advanced
hanzoaihanzoai

gsap-scrolltrigger

Link GSAP animations to scroll events with ScrollTrigger.

Official
Advanced
calesthiocalesthio
55.1k

gsap-scrolltrigger

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

Community
Intermediate
fyunusafyunusa

scroll-reveal-libraries

Implement scroll-triggered animations with AOS data attributes.

Community
Basic