gsap-scrolltrigger

Create scroll-linked animations and pin elements with GSAP ScrollTrigger.

6|5|Updated May 7, 2026

Search Tags:#animation #interactive design #gsap #scrolltrigger #scroll-based

Ready to run

npx skills add https://github.com/wubq511/ProjectFlow --skill gsap-scrolltrigger-wubq511

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/wubq511/ProjectFlow/tree/main/SkillPack/gsap-scrolltrigger
Command: npx skills add https://github.com/wubq511/ProjectFlow --skill gsap-scrolltrigger-wubq511

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill addresses the need for sophisticated scroll-driven animations, providing tools for pinning elements, scrubbing animations, and triggering tweens based on scroll position.

Core Features & Use Cases

Scroll-Linked Animations: Create animations that trigger or scrub based on the scroll position.
Pinning Elements: Keep elements in place while the user scrolls.
Use Case: Design engaging user interfaces with parallax effects, pinned headers, or scroll-based storytelling.

Quick Start

To register the GSAP ScrollTrigger plugin, use the command: gsap.registerPlugin(ScrollTrigger);

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

Yes, you can pin elements to keep them fixed in place while the user continues scrolling the page. ScrollTrigger provides pinning options to lock elements during a defined scroll range for scroll-based storytelling.

How do I register the ScrollTrigger plugin before building animations?▼

You must register the ScrollTrigger plugin before use by calling `gsap.registerPlugin(ScrollTrigger);` in your scripts. This setup ensures the scroll-based animation functionality is properly activated within your project.

Can I integrate ScrollTrigger with existing GSAP timelines and tweens?▼

Yes, ScrollTrigger integrates directly into existing GSAP timelines and tweens to enable scroll-driven behavior. This allows you to attach scrubbing and custom triggers to complex animation sequences for interactive web design.

What are common use cases for scroll-based animations in interactive web design?▼

Common use cases for scroll-based animations include designing engaging user interfaces with parallax effects, pinned headers, and scroll-based storytelling. These techniques help create dynamic, scroll-linked experiences for web visitors.

Does ScrollTrigger support scrubbing animations to match scroll position exactly?▼

Yes, ScrollTrigger supports scrubbing options that synchronize the animation playback directly with the scroll position. This ensures the animation progresses forward and backward smoothly as the user scrolls up and down the page.