skills.rest
SharmaAnurag99
SharmaAnurag99COMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-scrolltrigger

Create scroll-driven animations and pin elements with GSAP ScrollTrigger.

Updated Apr 17, 2026
Search Tags:#frontend#gsap#pinning#parallax#scrolltrigger#scrub#scroll-animation
One-click install
npx skills add https://github.com/SharmaAnurag99/LuxuryBabyShop --skill gsap-scrolltrigger-sharmaanurag99
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/SharmaAnurag99/LuxuryBabyShop/tree/main/.agents/skills/gsap-scrolltrigger
Command: npx skills add https://github.com/SharmaAnurag99/LuxuryBabyShop --skill gsap-scrolltrigger-sharmaanurag99

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps front-end developers implement scroll-driven animations, pinning, and parallax effects so UI motion synchronizes precisely with user scrolling and avoids common timing and layout issues.

Core Features & Use Cases

  • Scroll-linked animations and scrubbing: tie tweens and timelines to scroll progress for smooth, responsive motion.
  • Pinning and fake horizontal scroll: pin sections during scroll ranges and implement horizontal containerAnimation patterns for carousel-like experiences.
  • Integration and performance: use scrollerProxy to work with custom smooth-scroll libraries, batch entry animations for performance, and refresh/cleanup patterns for SPAs.
  • Use Case: animate hero sections that pin while content scrolls, reveal lists with ScrollTrigger.batch, or translate vertical scrolling into a horizontal product gallery.

Quick Start

Register ScrollTrigger with gsap, then create a scrollTrigger on your timeline or tween that pins .hero, sets start and end points, and enables scrub for smooth scroll-driven progress.

Frequently Asked Questions about gsap-scrolltrigger

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

FAQPage Schema
How do I build scroll-driven animations and pin elements with gsap?▼

To build scroll-driven animations with gsap, register the ScrollTrigger plugin and apply it to tweens or timelines by configuring trigger, start, end, scrub, and pin options to synchronize visual motion with user scrolling.

Can I use gsap ScrollTrigger to create fake horizontal scroll and parallax effects?▼

Yes, gsap ScrollTrigger supports parallax effects and fake horizontal scroll by pinning sections during specific scroll ranges and implementing horizontal containerAnimation patterns for carousel-like experiences.

Does gsap ScrollTrigger work with custom smooth-scroll libraries?▼

Yes, gsap ScrollTrigger works with custom smooth-scroll libraries by using the scrollerProxy method, which integrates the scroll synchronization mechanism with your custom scrolling container.

How do I batch entry reveal animations for performance in a single-page application?▼

You can batch entry reveal animations using ScrollTrigger.batch, which groups multiple animations to optimize performance, and call ScrollTrigger.refresh after layout changes to maintain accurate trigger positions.

Why do my gsap scroll animations break or miscalculate positions in a single-page application?▼

Scroll animations break in single-page applications when layout changes shift trigger positions, requiring you to call ScrollTrigger.refresh after updates and kill instances during cleanup to prevent memory leaks.

What is the best way to scrub a gsap timeline linked to scroll progress?▼

The best way to scrub a gsap timeline linked to scroll progress is to attach a ScrollTrigger with the scrub property enabled, tying tween and timeline progress directly to the user's vertical scroll position for smooth motion.

Related Skills

Explore More Software Engineering Skills→
DanielV-94DanielV-94

gsap-frameworks

Manage GSAP animation lifecycles in Vue 3 and Svelte components.

Community
Intermediate
reggiechan74reggiechan74
23

kill-claude-mem

Terminate stale claude-mem worker and MCP server processes via bash scripts.

Community
Intermediate
gyalamanch001agyalamanch001a

gsap-scrolltrigger

Build scroll-linked animations with GSAP ScrollTrigger for pinning, scrubbing, and viewport reveals.

Community
Advanced
TMR1905TMR1905

scroll-animation

Implement scroll-driven animations using CSS, Intersection Observer, and GSAP ScrollTrigger.

Community
Intermediate