# animation-on-scroll

> Claude/Codex skill by [@mengto](https://omgskills.com/library/mengto/index.md) · 7.3k stars · Updated 2026-11-08

Create an on-scroll animation trigger using IntersectionObserver with Tailwind-friendly animation classes and keyframes. Use when asked for scroll-reveal, animate-on-scroll, or sequencing element animations when they enter the viewport.

## Install

```sh
git clone https://github.com/MengTo/Skills /tmp/Skills && ln -s /tmp/Skills/agent-skills/web-design/animation-on-scroll ~/.claude/skills/animation-on-scroll
```

## From README

Animation On Scroll Skill Workflow Confirm animation style, timing, and whether animations should run once or repeat. Provide the keyframes + JS observer snippet and the exact Tailwind class to apply. Offer focused tweaks only (threshold, rootMargin, duration, delay, transform/blur values). checklist Insert the JS snippet in the after the keyframes. Add the animation class and animate-on-scroll to elements. Ensure your keyframes name matches the Tailwind animation reference. IntersectionObserver trigger Keyframes Tailwind example Customization knobs Trigger: adjust threshold and rootMargin for earlier/later reveals. Repeat: set once = false to allow replays when re-entering. Motion: tweak translateY and blur in keyframes. Timing: change duration and delay in the Tailwind animation value. Common pitfalls Forgetting to include the keyframes before the JS snippet. Using a different keyframe name than in the Tailwind animation.

## Links

- HTML page: https://omgskills.com/library/mengto/skills/animation-on-scroll/
- GitHub: https://github.com/MengTo/Skills
- Author: [@mengto](https://omgskills.com/library/mengto/index.md)

## More from this repo

- [animation-systems](https://omgskills.com/library/mengto/skills/animation-systems/index.md) — Used when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel.
   - [@mengto](https://omgskills.com/library/mengto/index.md) · 6.8k stars
- [beautiful-shadows](https://omgskills.com/library/mengto/skills/beautiful-shadows/index.md) — Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation.
   - [@mengto](https://omgskills.com/library/mengto/index.md) · 6.8k stars
- [build-awwwards-quality-sites](https://omgskills.com/library/mengto/skills/build-awwwards-quality-sites/index.md) — Art-direct and implement distinctive, motion-rich marketing, editorial, portfolio, and landing websites with original...
   - [@mengto](https://omgskills.com/library/mengto/index.md) · 6.8k stars