skills.rest
HoussamMrabet
HoussamMrabetCOMMUNITY
Explore all skills by this author →
Website𝕏@MrabetHoussamGitHub

gsap-scrolltrigger

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Building scroll-driven animations from scratch requires manual scroll event handling, position calculations, and cleanup logic that is error-prone and hard to maintain. This Skill provides the correct patterns for GSAP ScrollTrigger so scroll-triggered tweens, pinned sections, and scrubbed timelines work reliably on the first attempt. ## Core Features & Use Cases - Scroll-Triggered Animations: Tie tweens and timelines to scroll position with start/end triggers, toggleActions, and callbacks like onEnter and onUpdate. - Pinning and Scrubbing: Pin elements during a scroll range and link animation progress directly to scroll position with configurable smoothing. - Advanced Patterns: Batch callbacks with ScrollTrigger.batch, build fake horizontal scroll with containerAnimation, and integrate third-party smooth scrollers via scrollerProxy. - Use Case: A developer building a landing page wants a section to pin while its content animates horizontally as the user scrolls vertically, with elements fading in as they enter the viewport. ## 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 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 an element while scrolling with ScrollTrigger?▼

Set pin: true in the scrollTrigger config and define the scroll range with start and end, such as end: "+=1000" to pin for 1000px of scrolling. 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, optionally with a smoothing delay in seconds. ToggleActions fire discrete play, reverse, or pause behaviors at enter and leave boundaries. Do not use both on the same trigger; scrub wins if both exist.

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 with ScrollTrigger.getAll() or getById.

Why is my ScrollTrigger animation in the wrong position after content loads?▼

Trigger positions are calculated at creation time, so dynamic content, images, or fonts that change layout invalidate them. Call ScrollTrigger.refresh() after such changes; viewport resize is handled automatically with a 200ms debounce.

How do I create a horizontal scroll section with ScrollTrigger?▼

Pin a full-viewport section, animate an inner wrapper's x or xPercent with ease: "none", and attach ScrollTrigger with scrub. Set containerAnimation on nested triggers so they respond to the horizontal movement; pinning and snapping are unavailable on those nested triggers.

Related Skills

Explore More Software Engineering Skills→
Probably-GroupProbably-Group
3

gsap

Guide GSAP implementations with safe DOM targeting and structured orchestration.

Official
Advanced
Eng0AIEng0AI
15

gsap-awwwards-website

Build a React 19 landing page with GSAP scroll animations and Tailwind CSS 4.

Official
Advanced
DITEKmaxDITEKmax

gsap-scrolltrigger

Implement GSAP ScrollTrigger scroll-linked animations with pinning and scrubbed timelines.

Community
Advanced
andersoncollabandersoncollab

scroll-animations

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

Community
Intermediate