skills.rest
Microck
MicrockCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-scrolltrigger

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

Updated Feb 17, 2026
Search Tags:#web development#frontend#javascript#animation#gsap#scrolltrigger
One-click install
npx skills add https://github.com/Microck/gsap-skills --skill gsap-scrolltrigger-microck
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
ScarletFishScarletFish

gsap-scrolltrigger

Synchronize GSAP tweens and timelines with browser scroll position.

Community
Intermediate
haposofthaposoft
54

hapo:chrome-devtools

Automate browser interactions with Puppeteer for navigation, screenshots, and element analysis.

Official
Advanced
Probably-GroupProbably-Group
3

gsap

Guide GSAP implementations with safe DOM targeting and structured orchestration.

Official
Advanced
markus41markus41
18

Scroll Animations Skill

Implement scroll-triggered animations and parallax effects with Framer Motion or GSAP.

Community
Intermediate