Which animation libraries does this skill support?

This skill provides expert implementation patterns for Framer Motion, GSAP (specifically ScrollTrigger), and native JavaScript Intersection Observer.

How do I handle reveal-on-scroll animations?

The skill utilizes the useInView hook from Framer Motion or custom Intersection Observer hooks for performant, one-time or repeating reveal effects.

Does it support horizontal scrolling?

Yes, the skill provides implementations for horizontal scroll sections, including pinning and snapping logic using GSAP ScrollTrigger.

Can I create parallax effects with this skill?

Yes, it includes specific patterns for both background and foreground parallax using scroll-linked transforms to create depth during scrolling.

Scroll Animations Studio

Name: Scroll Animations Studio
Author: markus41

bymarkus41

•

デザインツール

Implements sophisticated scroll-triggered animations and parallax effects using Framer Motion, GSAP, and native web APIs.

This skill empowers Claude to architect immersive, scroll-driven storytelling experiences by providing expert patterns for scroll-linked interactions. It covers everything from simple reveal-on-scroll elements and progress indicators to complex GSAP ScrollTrigger timelines, parallax hero sections, and pinned horizontal scrolling. By leveraging best practices for Framer Motion and high-performance GSAP configurations, it ensures smooth, production-ready animations that enhance user engagement while maintaining optimal browser performance.

主な機能

01Horizontal scroll section layouts and snap-to-point logic

02Parallax background and foreground implementation strategies

03Framer Motion scroll-linked transforms and element tracking

049 GitHub stars

05GSAP ScrollTrigger integration for complex scrubbing and pinning

06Native Intersection Observer patterns for lightweight reveal effects

ユースケース

01Building 3D-perspective scroll effects and element entrance animations

02Implementing reading progress indicators and section navigators

03Creating interactive marketing landing pages with scroll-based storytelling

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add markus41/claude scroll-animations

For use in Claude.ai and ChatGPT