Scroll Reveal Animations
Adds fade-and-slide reveal animations to page elements as they scroll into view
- Repository
- MengTo/Skills
- Stars
- 7,187
- Licence
- MIT
- Files
- 3 files
What it does
Once installed, the agent can write the code that makes page elements fade, slide and blur into place when a visitor scrolls them into view. It supplies a small JavaScript observer that watches elements, a keyframe animation definition, and the Tailwind class to apply to each element, plus guidance on tweaking timing, trigger position, and whether the animation repeats. A demo page is included to show the result.
Great for
- Front-end developers adding scroll-reveal effects to a marketing or landing page
- Designers who want a ready-made fade and blur entrance animation without writing it from scratch
- Teams already using Tailwind CSS in their website projects
Skip it if
- Sites that do not use HTML and CSS, such as native mobile apps, where this code will not run
- Pages where motion must be fully disabled for accessibility reasons, unless the snippet is extended to respect reduced-motion settings (the skill does not mention this)
Try asking
- “Add a scroll reveal fade-up effect to my feature cards on the homepage”
- “Make these product images blur in as they enter the viewport, animating only once”
- “Give me the IntersectionObserver snippet and Tailwind classes for animate-on-scroll on my sections”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 3 original files, the MIT licence and an attribution note.
animation-on-scroll.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip animation-on-scroll.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip animation-on-scroll.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 3
Ask for the task
No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.
Get better results
- Name the animation style you want (fade, slide, blur, scale) and whether it should repeat, since the skill asks these questions first
- Insert the keyframes before the JavaScript snippet in the page head, as the skill's pitfalls section warns
- If elements already on screen do not animate, check the observer is initialised after the elements exist
What's inside
- demo/index.html
- demo/PROMPT.md
- SKILL.md
Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.