gsap-scrolltrigger

Name: gsap-scrolltrigger
Availability: InStock
Author: nnecec

Implement scroll-driven animations and pinning with GSAP ScrollTrigger.

2|1|Updated Mar 18, 2021

Search Tags:#animations #gsap #pinning #parallax #scroll #scrolltrigger #scrub

Ready to run

npx skills add https://github.com/nnecec/nnecec.studio --skill gsap-scrolltrigger-nnecec

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Scroll-based animations can be complex to implement reliably across devices; GSAP's ScrollTrigger provides an intuitive API to manage start/end, pinning, scrubbing, and markers, reducing boilerplate and debugging time.

Core Features & Use Cases

Trigger tweens and timelines on scroll with configurable start and end.
Pin elements to create sticky sections and parallax effects.
Scrub animation progress to match scroll position and build interactive UI demos.

Quick Start

Load GSAP and register ScrollTrigger, then create a basic trigger on a target element to start an animation.

Frequently Asked Questions about gsap-scrolltrigger

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What is scroll-driven animation and when do I need GSAP ScrollTrigger?▼

Scroll-driven animation ties playback to scroll position. You need GSAP ScrollTrigger to reliably manage start/end points, pinning, scrubbing, and markers for parallax or sticky sections across devices.

How do I pin a section for a sticky scroll effect?▼

To pin a section, register the ScrollTrigger plugin and create a trigger on your target element using the pin property. This locks the element during the scroll range to build sticky sections and parallax effects.

Can I scrub animation progress to match the scroll position exactly?▼

Yes, you can scrub animation progress to match scroll position. By enabling the scrub property in your trigger, the animation timeline progresses directly with scrolling, creating interactive UI demos synced to movement.

Does GSAP ScrollTrigger require any external dependencies to work?▼

GSAP ScrollTrigger requires no external dependencies. You simply need to load the GSAP library, register the ScrollTrigger plugin, and configure your triggers with start and end points to begin animating.

How do I clean up ScrollTrigger animations to prevent memory leaks?▼

Cleanup is a core usage requirement supported by ScrollTrigger. Properly removing triggers and killing associated animations when they are no longer needed prevents memory leaks and ensures reliable performance across page navigation.

Why are my scroll markers not showing up during development?▼

Markers help visualize start and end points during development. If they are not showing, ensure the markers property is explicitly enabled in your trigger configuration and the plugin is properly registered before creating triggers.