How to use the Scroll Reveal Animations agent skill

What the skill makes the agent do

Agent skills are folders of instructions and optional files that an AI agent loads when a task matches the skill's description. This one covers entrance animations for web pages. It uses the browser's IntersectionObserver to detect when an element enters the viewport, then plays a CSS keyframe animation on that element.

The skill's workflow asks the agent to confirm the animation style, the timing, and whether the animation should run once or repeat. It then provides the keyframes, the JavaScript observer snippet, and the exact Tailwind class to apply. Its default keyframe, named animationIn, moves an element up 30px while fading it in and removing a blur.

• A small JavaScript observer that watches elements with the animate-on-scroll class
• A keyframe animation definition named animationIn
• A Tailwind arbitrary animation class to apply to each element
• Tweakable values for trigger position, timing, distance and blur

Install the skill from the ZIP download

Download the ZIP for the animation-on-scroll skill from this page. Then either unzip it into your personal skills folder at ~/.claude/skills/, or unzip it into a project's .claude/skills/ folder so that only that project uses it.

If you use the Claude apps instead, open Settings, go to Capabilities, and upload the skill under Skills.

The skill package includes SKILL.md, demo/index.html and demo/PROMPT.md. SKILL.md holds the instructions the agent reads; the demo files show the result.

• Personal install: ~/.claude/skills/
• Project install: .claude/skills/ inside your project folder
• Claude apps: Settings → Capabilities → Skills, then upload

How to trigger the skill with natural requests

The skill is selected when your request matches its description, which mentions scroll-reveal, animate-on-scroll, and sequencing element animations as elements enter the viewport. You can also name it directly with $animation-on-scroll, as the demo prompts do.

Be specific about the page and the motion you want. The skill itself asks about the motion style, whether elements should replay, and how early they should start.

• "Use $animation-on-scroll to make the feature cards fade and blur in as the visitor scrolls."
• "Add scroll-reveal to the headings on my landing page, once only, with a 0.6s duration."
• "Sequence the three pricing blocks so each one reveals a little after the previous."
• "Make the testimonials replay every time they re-enter the viewport."

Apply the code to your page

The skill's usage notes say to insert the JavaScript snippet in the head of the page after the keyframes. The keyframes go in a style block in the head, and the observer script sets up a shared IntersectionObserver and an initInViewAnimations function that runs when the DOM is loaded.

Add the animation-on-scroll class and the Tailwind animation class to each element you want to reveal. The keyframe name in the Tailwind value must match the name in your keyframes. The default Tailwind value is shown below.

• Put the keyframes before the JavaScript snippet.
• Add both animate-on-scroll and the animation class to each element.
• Keep the keyframe name in the Tailwind value identical to the keyframe name.

Tweak timing, trigger position and repeats

The skill offers focused adjustments rather than a full redesign. The trigger point is controlled by threshold and rootMargin in the observer options, which decide how early or late an element reveals. Timing is set in the Tailwind animation value, where the duration and delay appear.

By default the observer stops watching an element after it has revealed once. To allow replays when an element re-enters the viewport, change the once variable in the snippet to false. Distance and blur are set in the keyframes.

• Trigger: adjust threshold and rootMargin for earlier or later reveals
• Repeat: set once = false to replay on re-entry
• Motion: change translateY and blur in the keyframes
• Timing: change duration and delay in the Tailwind animation value

Avoid common mistakes

Most failures come from the setup order or from names that do not match. The skill lists three common pitfalls. Check them first if an element never animates.

An element that is already in view when the observer starts may not animate, so test on the real page after scrolling.

• Forgetting to include the keyframes before the JS snippet
• Using a keyframe name that differs from the name in the Tailwind animation
• Elements already in view before the observer initialises