animation-on-scroll
CommunityAdd scroll-triggered reveal animations
Design & Creative#web components#tailwindcss#intersectionobserver#scroll reveal#ui motion#animation keyframes#viewport triggers
AuthorMengTo
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill solves the problem of creating reliable scroll-reveal animations without brittle timing or manual event wiring, so elements animate when they enter the viewport.
Core Features & Use Cases
- IntersectionObserver Trigger: Uses an IntersectionObserver-based approach to start animations as elements become visible.
- Tailwind-Friendly Animation Wiring: Combines Tailwind animation utility classes with keyframe definitions and a play-state toggle.
- Repeat/Run-Once Control: Supports running once or re-triggering animations when users scroll back.
Quick Start
Use the animation-on-scroll skill to add IntersectionObserver scroll triggers and Tailwind keyframed reveals for your elements, using the provided keyframes and the animate-on-scroll class.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: animation-on-scroll Download link: https://github.com/MengTo/Skills/archive/main.zip#animation-on-scroll Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.