gsap-scrolltrigger

Create scroll-linked animations, pinning, and scrubbing with GSAP ScrollTrigger.

Updated Apr 21, 2026

Search Tags:#web development #animation #interactivity #gsap #scrolltrigger

Ready to run

npx skills add https://github.com/LuXDAmore/experiments --skill gsap-scrolltrigger-luxdamore

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/LuXDAmore/experiments/tree/main/.continue/skills/gsap-scrolltrigger
Command: npx skills add https://github.com/LuXDAmore/experiments --skill gsap-scrolltrigger-luxdamore

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, and includes scripts (resource) components.

What problem does it solve?

This Skill simplifies the creation of scroll-driven animations, parallax effects, and pinned sections using GSAP's ScrollTrigger plugin, enabling smooth and engaging user experiences.

Core Features & Use Cases

Scroll-Linked Animations: Trigger animations and transitions based on scroll position.
Pinning Elements: Keep elements in place while the page scrolls.
Scrubbing: Move forward and backward through the scrollable content smoothly.
Use Case: Create a one-page website that loads additional content and animations as the user scrolls down, creating a compelling narrative or interactive story.

Quick Start

Register the ScrollTrigger plugin and define a basic trigger for an element to start an animation when the top of the element reaches the center of the viewport.

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 that trigger when an element enters the viewport?▼

Scroll-linked animations trigger based on scroll position by registering the ScrollTrigger plugin and defining a basic trigger to start an animation when the element reaches the viewport center. This enables smooth transitions for interactive websites.

Can I pin elements in place while the user scrolls down the page?▼

Pinning elements keeps specific sections in place while the page scrolls. This is ideal for building one-page interactive websites where you need to lock an element to create a compelling narrative or story.

How does scrubbing work for scroll-based animations?▼

Scrubbing moves forward and backward through scrollable content smoothly by linking the animation progress directly to the scroll position. This creates a seamless interactive experience without jumping or skipping frames.

Do I need GSAP installed to use scroll-triggered animations for parallax effects?▼

You need GSAP installed for animation control to use this ScrollTrigger functionality. It requires the GSAP library as a dependency to handle scroll-dependent animations and parallax effects in web applications.

What is the best way to build an interactive story that loads content as the user scrolls?▼

Building an interactive story is best achieved by combining scroll-linked animations, pinning, and scrubbing. This setup loads additional content and animations dynamically as the user scrolls down, creating an engaging narrative.