skills.rest
langgenius
langgeniusOFFICIAL
Explore all skills by this author →
Website𝕏@dify_aiGitHub

animation-on-scroll

Creates scroll-triggered reveal animations using IntersectionObserver and Tailwind animation classes.

3|Updated Apr 20, 2026
Search Tags:#frontend#tailwind#keyframes#intersectionobserver#scroll animation#css animation#scroll reveal
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill animation-on-scroll-langgenius
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animation-on-scroll
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/animation-on-scroll
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill animation-on-scroll-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Elements on a page often need to animate into view as the user scrolls, but wiring up IntersectionObserver, keyframes, and Tailwind classes by hand is repetitive and error-prone. This Skill provides a ready-made pattern for scroll-reveal animations with clear usage steps. ## Core Features & Use Cases - IntersectionObserver Trigger: A reusable JavaScript snippet that pauses animations by default and plays them when elements enter the viewport, with configurable threshold and rootMargin. - Keyframes and Tailwind Classes: A fade-slide-blur keyframe definition plus the exact Tailwind arbitrary-value class to apply to target elements. - Customization Guidance: Knobs for one-time versus repeating animations, timing, motion style, and common pitfalls like mismatched keyframe names. - Use Case: When building a marketing landing page, apply the provided class and snippet so each section fades and slides in as the visitor scrolls down. ## Quick Start Ask the AI to add a scroll-reveal animation to your page elements using the IntersectionObserver snippet, keyframes, and Tailwind animation class from this Skill.

Frequently Asked Questions about animation-on-scroll

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I animate elements when they scroll into view?▼

Use IntersectionObserver to detect when an element enters the viewport, then toggle a class that switches its CSS animation-play-state from paused to running. Combine this with a keyframes definition and a Tailwind animation class applied to the target elements.

How to add scroll reveal animations with Tailwind CSS?▼

Define a @keyframes rule in a style tag, then apply an arbitrary-value class like [animation:animationIn_0.8s_ease-out_0.1s_both] plus an animate-on-scroll marker class. A small JavaScript observer adds the running state when elements become visible.

Can IntersectionObserver animations run only once?▼

Yes, set a once flag to true and call unobserve on the element after it first intersects. Setting the flag to false lets the animation replay each time the element re-enters the viewport.

Why is my scroll animation not triggering?▼

Common causes include missing keyframes before the observer script, a keyframe name that does not match the Tailwind animation reference, or the element already being in view before the observer initializes. Check these three points first.

How do I trigger animations earlier before elements enter the viewport?▼

Adjust the IntersectionObserver rootMargin, for example 0px 0px -10% 0px, and the threshold value. A lower threshold or adjusted rootMargin starts the animation sooner as the element approaches the visible area.

Related Skills

Explore More Software Engineering Skills→
MengToMengTo
4.5k

animation-on-scroll

Trigger keyframed Tailwind animations when elements enter the viewport using IntersectionObserver.

Community
Intermediate
PlayableIntelligencePlayableIntelligence
307

game-deploy

Deploy browser games to here.now, GitHub Pages, Vercel, or Netlify.

Official
Advanced
taxmaxitaxmaxi
1

animation-accessibility

Implements reduced-motion variants for web animations using CSS, Tailwind, and Framer Motion.

Official
Intermediate
ScarletFishScarletFish

gsap-scrolltrigger

Synchronize GSAP tweens and timelines with browser scroll position.

Community
Intermediate