skills.rest
malikkotb
malikkotbCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-scrolltrigger

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Building scroll-driven animations by hand requires manual scroll event handling, position math, and cleanup logic. This Skill provides the correct GSAP ScrollTrigger patterns for triggering tweens on scroll, pinning sections, scrubbing timelines to scroll position, and integrating with smooth-scroll libraries. ## Core Features & Use Cases - Scroll-Linked Animations: Trigger tweens and timelines at precise scroll positions using start/end, toggleActions, and scrub configuration. - Pinning and Fake Horizontal Scroll: Pin sections during scroll and drive horizontal content movement via containerAnimation with the required ease: "none" pattern. - Batching and Third-Party Scrollers: Use ScrollTrigger.batch() for staggered reveal animations and scrollerProxy() to integrate external smooth-scroll libraries. - Use Case: A developer building a landing page wants a section pinned while its content animates horizontally as the user scrolls vertically, with cleanup handled correctly in a React app. ## 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 or timeline. Set trigger, start, and end to define when the animation activates, and use toggleActions or scrub to control playback behavior.

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 pin spacing by default so layout does not collapse; animate children of the pinned element rather than the pinned element itself.

What is the difference between scrub and toggleActions in ScrollTrigger?▼

Scrub links animation progress directly to scroll position, while toggleActions plays, reverses, or resets the animation at discrete enter/leave events. Do not use both on the same ScrollTrigger; if both exist, scrub wins.

Does ScrollTrigger work 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 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 have ease: "none". Any other easing breaks the 1:1 mapping between vertical scroll position and horizontal content position, which is the most common cause of this issue.

Why are my ScrollTrigger positions wrong after loading content?▼

ScrollTrigger calculates positions on creation and on viewport resize, but dynamic content, images, or fonts change layout afterward. Call ScrollTrigger.refresh() after such DOM changes to recalculate trigger positions.

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
BEIRUXBEIRUX

site-design-scanner

Analyze website visual design and animations to produce a structured site analysis report.

Official
Advanced
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