skills.rest
Carlosfwd86
Carlosfwd86COMMUNITY
Explore all skills by this author →
GitHub

gsap-scrolltrigger

Build scroll-driven animations with GSAP ScrollTrigger for pinned sections and reveals.

Updated Jun 4, 2026
Search Tags:#gsap#pinning#parallax#scrolltrigger#scrub#scroll animation
One-click install
npx skills add https://github.com/Carlosfwd86/Conectando-Talento-UCR --skill gsap-scrolltrigger-carlosfwd86
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/Carlosfwd86/Conectando-Talento-UCR/tree/main/Skill%20GSAP/gsap-skills/skills/gsap-scrolltrigger
Command: npx skills add https://github.com/Carlosfwd86/Conectando-Talento-UCR --skill gsap-scrolltrigger-carlosfwd86

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you build smooth, scroll-driven animation experiences that react to where the user is on the page, removing the need to manually choreograph timing, pinning, and reveal logic.

Core Features & Use Cases

  • Scroll-Triggered Animation: Start tweens and timelines when elements enter, leave, or cross specific viewport positions.
  • Pinning and Scrubbing: Keep sections fixed during a scroll range and tie animation progress directly to scroll position.
  • Real-World Use Case: Use it to create a storytelling landing page with pinned panels, animated headings, parallax movement, and sequential section reveals that stay perfectly synced to scrolling.

Quick Start

Use the gsap-scrolltrigger skill to create a pinned scroll sequence that animates the attached section as the page is scrolled.

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 animation that syncs motion with page scroll?▼

To create scroll-driven animation, register the ScrollTrigger plugin, define trigger positions with start and end values, and choose scrub or toggleActions to synchronize tweens and timelines with page scroll progress.

What is the best way to build a pinned storytelling layout with parallax sections?▼

Building a pinned storytelling layout requires defining a trigger element, setting start and end viewport positions, and enabling pinning to keep sections fixed while tying animation progress directly to scroll position.

How do I trigger element reveals when they enter the viewport during scrolling?▼

Triggering scroll-linked reveals involves registering ScrollTrigger and using toggleActions to start tweens when elements enter, leave, or cross specific viewport positions during page scroll.

Why does my scroll animation break after layout changes or window resizing?▼

Scroll animation breaks after layout changes because trigger positions become outdated; you must call refresh on ScrollTrigger instances after any DOM or layout modification to recalculate viewport-aware start and end values.

Can I use scrub to tie animation progress directly to scroll position?▼

Yes, you can use scrub to tie animation progress directly to scroll position, ensuring that scrolling forward or backward updates the tween or timeline progress in real-time without independent timeline timing.

Does horizontal faux-scroll work with scroll-linked motion setup?▼

Horizontal faux-scroll works by pinning a container vertically and translating its inner content horizontally, synchronizing the horizontal movement with the vertical scroll progress using start and end values.

Related Skills

Explore More Software Engineering Skills→
47thtechcorner47thtechcorner
21

gsap-scrolltrigger

Implement scroll-linked animations and pinning with GSAP ScrollTrigger.

Community
Intermediate
TumeloRamaphosaTumeloRamaphosa

gsap-scrolltrigger

Create scroll-synchronized GSAP animations with ScrollTrigger configurations.

Community
Advanced
utsavm81098utsavm81098

gsap-timeline

Create and manage GSAP timelines to orchestrate multiple tweens.

Community
Advanced
markus41markus41
18

Scroll Animations Skill

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

Community
Intermediate