skills.rest
freshtechbro
freshtechbroCOMMUNITY
Explore all skills by this author →
𝕏@bishopdotunGitHub

gsap-scrolltrigger

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
One-click install
npx skills add https://github.com/freshtechbro/claudedesignskills --skill gsap-scrolltrigger-freshtechbro
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
het8802het8802
3

hyperframes

Automate HTML-based video composition with GSAP animations and synchronized text and audio.

Community
Advanced
nonputtipongnonputtipong

scroll-experience

Design scroll-driven web experiences with GSAP ScrollTrigger, Framer Motion, and CSS scroll-timeline.

Community
Intermediate
HardyLiu6HardyLiu6

gsap-scrolltrigger

Implement GSAP ScrollTrigger for scroll-linked animations, pinning, scrubbing, and custom triggers.

Community
Intermediate
markus41markus41
18

Scroll Animations Skill

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

Community
Intermediate