gsap-scrolltrigger

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

Updated Oct 2, 2024
One-click install
npx skills add https://github.com/James-Gamboa/portfolio-james --skill gsap-scrolltrigger-james-gamboa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/James-Gamboa/portfolio-james/tree/main/.agents/skills/gsap-scrolltrigger
Command: npx skills add https://github.com/James-Gamboa/portfolio-james --skill gsap-scrolltrigger-james-gamboa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a straightforward approach to building scroll-driven animations by linking tween timelines to scroll position, pinning elements, and scrubbing progress for engaging UI experiences.

Core Features & Use Cases

  • Trigger tweens and timelines on scroll, pin sections, and scrub animation progress for responsive interactions.
  • Use in parallax effects, pinned sections, and scroll-based UI enhancements across modern web apps.
  • Example: implement a hero section that animates as the user scrolls, while keeping key elements fixed and responsive.

Quick Start

Install GSAP, register the ScrollTrigger plugin, and create your first ScrollTrigger-enabled animation.

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?▼

GSAP ScrollTrigger creates scroll-driven animations by linking tween timelines to scroll position. You register the ScrollTrigger plugin, configure start, end, scrub, and pin properties, and scrub animation progress to trigger reactive, scroll-synced motion in web interfaces.

What is scrubbing in GSAP scroll animations?▼

Scrubbing in GSAP scroll animations links an animation's progress directly to the scroll position. As the user scrolls up or down, the animation plays forward or backward, creating a responsive, scroll-synced motion for elements like parallax effects and pinned sections.

Can I pin elements on the screen while scrolling using GSAP?▼

Yes, you can pin elements on the screen while scrolling using GSAP ScrollTrigger. By configuring the pin property, elements remain fixed at a specific position until the scroll reaches the defined end point, enabling scroll-based storytelling and reactive UI.

How do I implement horizontal scroll animations with GSAP ScrollTrigger?▼

You implement horizontal scroll animations with GSAP ScrollTrigger by using the containerAnimation parameter. This configuration links horizontal tweens to a vertical scroll position, enforcing best practices for horizontal scroll via containerAnimation to create scroll-based UI enhancements.

Do I need to register the ScrollTrigger plugin before using it?▼

Yes, you must register the ScrollTrigger plugin before using it. Enforcing plugin registration is a required best practice in GSAP ScrollTrigger to correctly configure and trigger scroll-driven animations, ensuring timelines sync properly with scroll position.

Why are markers used in GSAP ScrollTrigger configuration?▼

Markers are used in GSAP ScrollTrigger configuration to visually debug start and end points during development. They help developers fine-tune scroll animations, pinning behaviors, and scrubbing progress to ensure scroll-driven animations trigger accurately at specific scroll positions.