skills.rest
AndyMarigoldLabs
AndyMarigoldLabsCOMMUNITY
Explore all skills by this author →
GitHub

gsap-scrolltrigger

Implement scroll-driven animations with GSAP ScrollTrigger plugin.

Updated Jan 17, 2026
Search Tags:#animation#gsap#pinning#parallax#web-animations#scrub#scroll-trigger
One-click install
npx skills add https://github.com/AndyMarigoldLabs/continuous-funding --skill gsap-scrolltrigger
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/AndyMarigoldLabs/continuous-funding/tree/main/.claude/skills/gsap-scrolltrigger
Command: npx skills add https://github.com/AndyMarigoldLabs/continuous-funding --skill gsap-scrolltrigger

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables developers to implement complex, scroll-driven animations efficiently using the GSAP ScrollTrigger plugin, reducing boilerplate and ensuring consistent behavior across devices.

Core Features & Use Cases

  • Pinning sections: keep content fixed during scroll to reveal more information.
  • Scrubbed animations: tie animation progress directly to scroll position for responsive interactions.
  • Snap points & horizontal scrolling: create guided, panel-based navigation and parallax layers.
  • Parallax effects: layer backgrounds and foregrounds at different speeds for depth.
  • Use Case: build sticky-step product tours, with progress indicators and synchronized transitions.

Quick Start

Install GSAP with npm: npm install gsap. Then import and register the ScrollTrigger plugin in your project: gsap.registerPlugin(ScrollTrigger); Create a basic scroll-driven animation: gsap.to('.box', { x: 500, scrollTrigger: { trigger: '.box', start: 'top center', end: 'bottom center', scrub: true } });

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 with GSAP ScrollTrigger?▼

To create scroll-driven animations, install GSAP via npm, import the plugin, call gsap.registerPlugin(ScrollTrigger), and configure properties like trigger, start, end, and scrub within your animation tween. This ties animation progress directly to scroll position.

What is scrubbing in web animations and how does it work with scroll position?▼

Scrubbing in web animations ties animation progress directly to scroll position, ensuring responsive interactions. By setting scrub: true in GSAP ScrollTrigger, the animation plays forward and backward smoothly as the user scrolls up and down the page.

How do I pin a sticky section during scroll to reveal more information?▼

To pin a sticky section during scroll, use the pin property in your GSAP ScrollTrigger configuration. This keeps content fixed at a specific start point until the end point is reached, allowing you to reveal synchronized information.

Can I use GSAP ScrollTrigger with vanilla JavaScript imports?▼

Yes, you can use GSAP ScrollTrigger with vanilla JavaScript imports. You need to install the gsap package via npm, import it into your project file, and register the ScrollTrigger plugin before configuring your scroll-driven animations.

What's the best way to build horizontal scrolling panels with snap points?▼

The best way to build horizontal scrolling panels with snap points is using GSAP ScrollTrigger. You can configure the snap property to create guided, panel-based navigation, enabling horizontal scrolling and parallax layers for interactive web interfaces.

Why does my parallax animation skip frames when scrolling on mobile devices?▼

If your parallax animation skips frames, ensure you are properly configuring the start, end, and scrub properties in GSAP ScrollTrigger. This ensures consistent behavior across devices by tying animation progress smoothly to scroll position.

Related Skills

Explore More Software Engineering Skills→
MicrockMicrock

gsap-scrolltrigger

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

Community
Intermediate
LeandelosantosLeandelosantos

scroll-experience

Orchestrate scroll narratives with GSAP ScrollTrigger, Framer Motion, and native Scroll Timeline.

Community
Intermediate
freshtechbrofreshtechbro
682

gsap-scrolltrigger

Create scroll-driven animations with GSAP ScrollTrigger for pinning and parallax effects.

Community
Intermediate
R1ve3raaTechR1ve3raaTech

gsap-scrolltrigger

Create scroll-linked animations with GSAP ScrollTrigger for web pages.

Community
Advanced