skills.rest
brunoolf
brunoolfCOMMUNITY
Explore all skills by this author →
GitHub

gsap-scrolltrigger

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Building scroll-driven animations by hand requires tracking scroll positions, viewport intersections, and element pinning manually, which is error-prone and hard to synchronize with animation timelines. ## Core Features & Use Cases - Scroll-Linked Animation: Tie tweens and timelines to scroll position with start/end triggers, toggleActions, and scrub for progress-linked playback. - Pinning and Fake Horizontal Scroll: Pin sections during scroll ranges and drive horizontal content movement from vertical scroll using containerAnimation. - Batching and Custom Scrollers: Use ScrollTrigger.batch() for staggered reveal animations and scrollerProxy() to integrate third-party smooth-scroll libraries. - Use Case: When building a landing page where a section pins to the viewport while cards slide horizontally as the user scrolls down, this Skill provides the correct ScrollTrigger configuration including the required ease: "none" on the horizontal tween. ## Quick Start Use the gsap-scrolltrigger skill to pin a section and scrub a timeline of animations 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 animate an element on scroll with GSAP ScrollTrigger?▼

Register the plugin with gsap.registerPlugin(ScrollTrigger), then add a scrollTrigger config to a tween 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 control pin duration. ScrollTrigger adds a spacer by default via pinSpacing so the layout does not collapse; animate children of the pinned element, not the pinned element itself.

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, kill instances manually in a useEffect cleanup with ScrollTrigger.getAll() or ScrollTrigger.getById().

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

The horizontal tween driving a 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.

Should I use scrub or toggleActions on a ScrollTrigger?▼

Use scrub when animation progress should follow scroll position continuously, and toggleActions for discrete play/reverse triggers at scroll boundaries. Do not combine both on the same ScrollTrigger; if both exist, scrub wins.

Why do my ScrollTrigger positions break after loading content dynamically?▼

ScrollTrigger calculates positions at creation time, so new content, images, or fonts shift trigger positions. Call ScrollTrigger.refresh() after DOM or layout changes; viewport resize is handled automatically with a 200ms debounce.

Related Skills

Explore More Software Engineering Skills→
Carlosfwd86Carlosfwd86

gsap-scrolltrigger

Build scroll-driven animations with GSAP ScrollTrigger for pinned sections and reveals.

Community
Advanced
powxenvpowxenv

fixing-motion-performance

Identify and fix UI animation performance issues in CSS, WAAPI, GSAP, and scroll-linked effects.

Community
Advanced
hanzoaihanzoai

gsap-core

Create timeline-based web animations with GSAP core API across frameworks.

Official
Intermediate
andersoncollabandersoncollab

scroll-animations

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

Community
Intermediate