skills.rest
gyalamanch001a
gyalamanch001aCOMMUNITY
Explore all skills by this author →
GitHub

gsap-scrolltrigger

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you build smooth, reliable scroll-driven animations without fighting timing, layout shifts, or custom scroll behavior.

Core Features & Use Cases

  • Scroll-linked motion: Tie tweens and timelines directly to scroll position for scrubbed animation.
  • Pinned storytelling sections: Keep sections fixed while content animates during a defined scroll range.
  • Viewport triggers and reveals: Fire animations as elements enter or leave the screen.
  • Advanced integration: Support batching, horizontal scroll patterns, and third-party smooth-scrolling setups.
  • Use Case: Create a marketing page with a pinned hero, parallax layers, and staged content reveals that stay synchronized across responsive layouts.

Quick Start

Use the gsap-scrolltrigger skill to create a pinned scroll animation that scrubs smoothly, reveals content as it enters the viewport, and stays stable across layout changes.

Frequently Asked Questions about gsap-scrolltrigger

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

FAQPage Schema
How do I create a pinned scroll animation that scrubs smoothly with GSAP?▼

To create a pinned scroll animation with GSAP, you register the ScrollTrigger plugin, configure start and end positions, and tie a tween or timeline to the scroll position using the scrub parameter for synchronized motion.

What is the best way to build parallax layers and reveal on scroll?▼

Building parallax layers and reveals on scroll involves linking element transformations directly to viewport triggers. You configure batch reveal animations as elements enter the screen and use scrubbed timelines for layered parallax depth.

Does GSAP ScrollTrigger work with horizontal scroll layouts?▼

Yes, GSAP ScrollTrigger supports horizontal scroll patterns by utilizing the containerAnimation property. You animate containers horizontally and map vertical scrolling input to horizontal movement for custom scroll experiences.

How do I handle layout shifts and refresh ScrollTrigger on resize?▼

Handling layout shifts and refreshing ScrollTrigger requires proper refresh and cleanup handling. You call ScrollTrigger.refresh() after layout changes to recalculate positions and ensure scroll-linked motion stays stable across responsive breakpoints.

Can I use ScrollTrigger with third-party smooth-scrolling libraries?▼

Yes, you can integrate ScrollTrigger with third-party smooth-scrolling setups using the scrollerProxy method. This allows ScrollTrigger to listen to custom scroll events and synchronize animations accurately with virtual scroll positions.

Related Skills

Explore More Software Engineering Skills→
Gekkos-techGekkos-tech
4

gsap-suite

Integrate GSAP animations into agency projects with ScrollTrigger and framework support.

Official
Advanced
mohamedgshoaibmohamedgshoaib
5

motion

Create declarative UI animations for JavaScript, React, and Vue.

Community
Advanced
ZiadNagarZiadNagar

scroll-experience

Build scroll-driven web narratives with parallax and scroll-triggered animations.

Community
Advanced
markus41markus41
18

Scroll Animations Skill

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

Community
Intermediate