gsap-scrolltrigger

Name: gsap-scrolltrigger
Availability: InStock
Author: FreshTechBro

Create scroll-driven animations with GSAP ScrollTrigger for pinning and parallax effects.

682|115|Updated Oct 25, 2025

Search Tags:#web development #animation #ux #gsap #parallax #scrolltrigger #scrollytelling

Ready to run

npx skills add https://github.com/freshtechbro/claudedesignskills --skill gsap-scrolltrigger-freshtechbro

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/freshtechbro/claudedesignskills/tree/main/plugins/bundles/core-3d-animation/skills/gsap-scrolltrigger
Command: npx skills add https://github.com/freshtechbro/claudedesignskills --skill gsap-scrolltrigger-freshtechbro

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and scripts (resource) and assets (resource) components.

What problem does it solve?

This Skill enables the creation of engaging, scroll-driven animations and interactive web experiences, transforming static pages into dynamic narratives.

Core Features & Use Cases

Scroll-Triggered Animations: Animate elements as users scroll through a page.
Pinning: Keep elements fixed in place during scroll.
Parallax Effects: Create depth by moving elements at different speeds.
Horizontal Scrolling: Control horizontal movement with vertical scroll.
Use Case: Build a scrollytelling website where text and images animate into view, sections pin to reveal content, and a background image scrolls at a different pace to create a parallax effect.

Quick Start

Use the gsap-scrolltrigger skill to create a fade-in animation for the element with the class 'fade-in' when it enters the viewport.

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 animations for a web page?▼

Scroll-driven animations animate elements based on scroll position using the GSAP ScrollTrigger plugin, transforming static pages into dynamic narratives as users scroll.

How do I pin elements on a page while scrolling?▼

Pinning elements while scrolling is supported by GSAP ScrollTrigger, allowing you to keep specific sections fixed in place during vertical scroll movements.

Can I implement horizontal scrolling controlled by vertical scroll position?▼

Horizontal scrolling controlled by vertical scroll position is supported, allowing vertical page scroll to drive horizontal movement of elements across the viewport.

What is the best way to build a scrollytelling website with parallax effects?▼

Building a scrollytelling website with parallax effects involves using ScrollTrigger to animate text, pin sections, and move background images at different speeds to create depth.

Does GSAP ScrollTrigger require specific dependencies to animate elements?▼

GSAP ScrollTrigger requires no external dependencies to animate elements, integrating directly with JavaScript for dynamic control and CSS for styling.

How do I trigger a fade-in animation when an element enters the viewport?▼

Triggering a fade-in animation when an element enters the viewport involves using ScrollTrigger to detect the element's class and animate it upon entry into the viewport.