Can I use this for element pinning?

Absolutely. It covers basic pinning, pinning different elements based on a trigger, and managing pinSpacing to ensure layouts remain consistent during scroll.

Is it compatible with GSAP Timelines?

Yes, it provides detailed guidance on integrating ScrollTrigger with GSAP timelines for complex, multi-step scroll animations.

What is the GSAP ScrollTrigger skill for Claude?

It is a specialized plugin for Claude Code that provides patterns, code snippets, and optimization tips for implementing the GSAP ScrollTrigger library in web projects.

Can this skill help with performance optimization?

Yes, it includes best practices such as using ScrollTrigger.batch() for large groups of elements and utilizing toggleActions to reduce main-thread load compared to heavy scrubbing.

Does it support horizontal scrolling?

Yes, the skill provides specific implementation patterns for horizontal scroll containers, including pinning and snapping configurations.

GSAP ScrollTrigger Animations

Name: GSAP ScrollTrigger Animations
Author: Microck

byMicrock

•

デザインツール

Implements advanced scroll-driven animations, element pinning, and interactive scroll-triggered effects using the GSAP ScrollTrigger plugin.

The GSAP ScrollTrigger skill empowers developers to create high-performance, scroll-based interactions with ease. It provides Claude with deep knowledge of the GreenSock ScrollTrigger plugin, enabling features like element pinning, scroll-linked scrubbing, and complex parallax effects. Whether you are building a storytelling landing page with horizontal sections or simple reveal-on-scroll animations, this skill offers the specific syntax, best practices, and performance optimization techniques needed to deliver professional-grade web animations.

主な機能

01Scroll-linked scrubbing with adjustable smoothing for fluid animations.

02Precise element pinning for sticky headers, sidebars, and section transitions.

03Built-in support for horizontal scrolling and multi-timeline coordination.

042 GitHub stars

05Advanced snapping capabilities to align scroll positions with specific elements.

06Comprehensive trigger logic using start/end positions and toggle actions.

ユースケース

01Implementing horizontal gallery sections within standard vertical page layouts.

02Creating sticky section headers that pin during specific scroll durations.

03Building interactive storytelling websites with parallax and scroll-reveals.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microck/opendots-microck gsap-scrolltrigger

For use in Claude.ai and ChatGPT

主な機能

01Scroll-linked scrubbing with adjustable smoothing for fluid animations.

02Precise element pinning for sticky headers, sidebars, and section transitions.

03Built-in support for horizontal scrolling and multi-timeline coordination.

042 GitHub stars

05Advanced snapping capabilities to align scroll positions with specific elements.

06Comprehensive trigger logic using start/end positions and toggle actions.

ユースケース

01Implementing horizontal gallery sections within standard vertical page layouts.

02Creating sticky section headers that pin during specific scroll durations.

03Building interactive storytelling websites with parallax and scroll-reveals.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microck/opendots-microck gsap-scrolltrigger

For use in Claude.ai and ChatGPT