skills.rest
Gito125
Gito125COMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-scrolltrigger

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

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

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, bad cleanup) break layouts. ## Core Features & Use Cases - Scroll-Linked Animation: 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 ease: "none". - Integration & Cleanup: Use ScrollTrigger.batch() for staggered reveals, scrollerProxy() for smooth-scroll libraries like Lenis, and proper refresh/kill patterns including React useGSAP() cleanup. - Use Case: Build a portfolio page where a hero section pins while a timeline scrubs through animations, then a project gallery scrolls horizontally as the user scrolls vertically. ## 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 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 Lenis or other smooth scroll libraries?▼

Yes, use ScrollTrigger.scrollerProxy() to override how ScrollTrigger reads scroll position, then register ScrollTrigger.update as a listener on the smooth-scroll instance. GSAP's own ScrollSmoother plugin works without a proxy.

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

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

How do I clean up ScrollTrigger in React?▼

Use the useGSAP() hook from the @gsap/react package, which automatically reverts animations and ScrollTriggers on unmount. Alternatively, kill instances manually in a useEffect cleanup via ScrollTrigger.getAll() or ScrollTrigger.getById().

Why are my ScrollTrigger positions wrong after loading content?▼

ScrollTrigger calculates positions at creation time, so dynamic content, images, or fonts that change layout require calling ScrollTrigger.refresh(). Viewport resize is handled automatically, but DOM changes are not.

Related Skills

Explore More Software Engineering Skills→
skyf0xxskyf0xx
26

gsap-scrolltrigger

Create scroll-linked animations and pinning with GSAP ScrollTrigger.

Community
Intermediate
bettyguobettyguo
8

dismiss-newsletter-popup

Dismiss newsletter popups on content sites using DOM markers and keyboard input.

Community
Intermediate
wyrmspirewyrmspire

video-to-website

Convert video files into scroll-driven animated websites with FFmpeg, GSAP, and Lenis.

Community
Advanced
andersoncollabandersoncollab

scroll-animations

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

Community
Intermediate