skills.rest
aesthezel
aesthezelCOMMUNITY
Explore all skills by this author →
Website𝕏@aesthezelGitHub

gsap-scrolltrigger

Implements ScrollTrigger for GSAP to create scroll-linked animations and interactions.

8|4|Updated Jul 31, 2025
Search Tags:#gsap#parallax#web animation#scroll trigger#scroll-linked animation
One-click install
npx skills add https://github.com/aesthezel/venezuela-juega --skill gsap-scrolltrigger-aesthezel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/aesthezel/venezuela-juega/tree/main/.junie/skills/gsap-scrolltrigger
Command: npx skills add https://github.com/aesthezel/venezuela-juega --skill gsap-scrolltrigger-aesthezel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, and includes scripts (resource) components.

What problem does it solve?

GSAP ScrollTrigger solves the problem of creating dynamic, scroll-based animations and interactions on web pages, such as parallax effects, pinned sections, and scroll-linked animations.

Core Features & Use Cases

  • Scroll-Linked Animations: Trigger animations as the user scrolls, creating engaging visual experiences.
  • Pinning Elements: Keep elements in place while other content scrolls, such as headers or sidebars.
  • Scrubbing: Control the scrubbing of animations to match the scroll position.
  • Use Case: Use this Skill to add a parallax effect to a website's header, making it move at a different speed than the rest of the content as the user scrolls.

Quick Start

To pin the header of your webpage while scrolling, use the gsap-scrolltrigger skill with the following code:

gsap.to(".header", {
  pin: true,
  scrollTrigger: {
    trigger: ".header",
    start: "top top",
    end: "bottom top"
  }
});

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-linked animations on my webpage?▼

Scroll-linked animations trigger dynamic visual effects based on the user's scroll position. You can implement them using GSAP's ScrollTrigger plugin to animate elements as they enter or leave the viewport.

What is the best way to pin a website header while scrolling?▼

Pinning a header keeps the element fixed while the rest of the content scrolls. Use the ScrollTrigger plugin with `pin: true` in your GSAP animation to lock the `.header` element at the top top position until the end trigger.

Can I use GSAP ScrollTrigger for parallax effects?▼

Yes, GSAP ScrollTrigger is designed specifically for parallax effects. It allows web pages to move background or foreground elements at different speeds relative to the scroll position, creating engaging visual experiences.

Do I need the GSAP library to use ScrollTrigger?▼

Yes, you need the GSAP library installed. ScrollTrigger is a plugin for the GreenSock Animation Platform, which requires the core GSAP dependency to function and control scroll-linked animations.

How does scrubbing work with scroll-linked animations?▼

Scrubbing controls the animation timeline to match the scroll position directly. This feature in ScrollTrigger ties the animation progress to the scrollbar, moving the animation forward and backward as the user scrolls.

Related Skills

Explore More Design & Creative Skills→
DanielV-94DanielV-94

gsap-frameworks

Manage GSAP animation lifecycles in Vue 3 and Svelte components.

Community
Intermediate
mgd34msumgd34msu
4

gsap

Create GSAP animations with timelines, scroll triggers, and JavaScript frameworks.

Community
Intermediate
moughamirmoughamir

tailwindcss-advanced-layouts

Generate Tailwind CSS grid and flexbox layouts with responsive breakpoints.

Community
Advanced
fyunusafyunusa

scroll-reveal-libraries

Implement scroll-triggered animations with AOS data attributes.

Community
Basic