gsap-scrolltrigger

Name: gsap-scrolltrigger
Availability: InStock
Author: Microck

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

Updated Feb 17, 2026

Search Tags:#web development #frontend #javascript #animation #gsap #scrolltrigger

Ready to run

npx skills add https://github.com/Microck/gsap-skills --skill gsap-scrolltrigger-microck

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables dynamic animations that are directly controlled by the user's scroll position, making web pages more interactive and engaging.

Core Features & Use Cases

Scroll-Driven Animations: Animate elements as the user scrolls through the page.
Pinning: Keep elements fixed in view while scrolling.
Scrubbing: Link animation progress directly to scroll progress for smooth effects.
Use Case: Create a parallax scrolling effect where background images move at a different speed than foreground content, or reveal sections of a page as the user scrolls down.

Quick Start

Use the gsap-scrolltrigger skill to animate a div with the class 'box' to move 500 pixels to the right when its top edge hits 80% 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-based animations that trigger when an element enters the viewport?▼

Scroll-based animations are created by linking GSAP animation timelines to user scroll events. This approach enables interactive web design by triggering animations as elements enter the viewport, making pages more engaging.

Can I pin an element to keep it fixed in view while the user scrolls down the page?▼

Yes, pinning keeps elements fixed in view while scrolling down the page. This feature is facilitated by the GSAP ScrollTrigger plugin to maintain element visibility during specific scroll progress intervals.

What is scrubbing in scroll-driven animation and how does it link to scroll progress?▼

Scrubbing in scroll-driven animation links animation progress directly to scroll progress for smooth effects. This mechanism ensures the animation timeline advances exactly in sync with the user's current scroll position.

Do I need the GSAP JavaScript library to implement parallax scrolling effects?▼

Yes, you need the GSAP JavaScript library and the ScrollTrigger plugin for execution. These dependencies are required to implement scroll-driven effects like parallax scrolling where background content moves at different speeds.

How do I animate a div to move horizontally when its top edge hits a specific viewport percentage?▼

To animate a div horizontally, link a GSAP animation timeline to a ScrollTrigger event configured to fire when the element's top edge reaches the target viewport percentage, such as 80%.

When should I avoid using scroll-driven animations for interactive web design?▼

Avoid using scroll-driven animations when page load speed and broad accessibility are the primary constraints. Heavy reliance on scroll event listeners and JavaScript execution for interactive web design can impact performance on lower-end devices.