skills.rest
AlejandroFigini
AlejandroFiginiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-scrolltrigger

Tie GSAP animations to scroll position with ScrollTrigger.

Updated Mar 27, 2026
Search Tags:#frontend#javascript#animation#web#gsap#scrolltrigger
One-click install
npx skills add https://github.com/AlejandroFigini/artist-portfolio --skill gsap-scrolltrigger-alejandrofigini
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/AlejandroFigini/artist-portfolio/tree/main/.agent/skills/gsap-scrolltrigger
Command: npx skills add https://github.com/AlejandroFigini/artist-portfolio --skill gsap-scrolltrigger-alejandrofigini

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

GSAP ScrollTrigger makes it easy to tie tweens to scroll, enabling scroll-driven animations, element pinning, and scrub effects with declarative configuration.

Core Features & Use Cases

  • Triggers animations based on scroll position
  • Pins elements to create fixed sections or parallax effects
  • Scrubs animation progress to the scroll with optional smoothing Use it to build engaging scroll experiences such as parallax, section reveals, and horizontal scroll inside pinned panels.

Quick Start

Install GSAP, import ScrollTrigger, and attach a ScrollTrigger to your tween.

Frequently Asked Questions about gsap-scrolltrigger

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create scroll-driven animations and pin elements during scroll?▼

Scroll-driven animations and element pinning are created using GSAP ScrollTrigger to tie tweens directly to scroll position, configuring explicit trigger, start, and end points to enable parallax and pinned sections.

Does GSAP ScrollTrigger work with React or only vanilla JavaScript?▼

GSAP ScrollTrigger works across React, vanilla JavaScript, and other frameworks to build scroll-driven interactions like section reveals, horizontal scroll, and pinned panels, provided you register the plugin explicitly.

How do I scrub animation progress to match the user's scroll position?▼

To scrub animation progress to the scroll position, attach a ScrollTrigger to your tween and enable the scrub property, which optionally applies smoothing for predictable, performant scroll-driven behavior.

What is the best way to configure predictable start and end points for scroll animations?▼

The best way to ensure predictable scroll animations is through proper trigger, start, and end configuration within ScrollTrigger, utilizing optional features like markers and containerAnimation to debug and control scroll-driven interactions.

Why do my scroll-triggered animations behave unpredictably or fail to start?▼

Unpredictable scroll-triggered animations usually occur from missing explicit plugin registration or improper trigger, start, and end configuration, which can be diagnosed and fixed by enabling markers to visualize the scroll positions.

Can I build horizontal scroll interactions inside pinned panels?▼

Yes, you can build horizontal scroll interactions inside pinned panels by using GSAP ScrollTrigger with the containerAnimation feature, allowing complex scroll-driven horizontal movements within fixed vertical sections.

Related Skills

Explore More Software Engineering Skills→
MicrockMicrock

gsap-scrolltrigger

Implement scroll-driven animations with GSAP ScrollTrigger for pinning and scrubbing.

Community
Intermediate
fgarofalo56fgarofalo56
6

animation-motion

Creates UI animations with motion using Tailwind's built-in color palette.

Community
Intermediate
MicrockMicrock

gsap-flip

Animate DOM layout changes using the FLIP technique with GSAP.

Community
Intermediate
TMR1905TMR1905

scroll-animation

Implement scroll-driven animations using CSS, Intersection Observer, and GSAP ScrollTrigger.

Community
Intermediate