Frontend y Diseño

Animation on Scroll

por Julien Thibeaut (ui-skills.com) 3.7k Estrellas en GitHub

Create scroll-reveal triggers using IntersectionObserver with Tailwind-friendly animation classes and keyframes.

#scroll#intersection-observer#tailwind#reveal

Claude Code Codex

Descripción General

This skill implements animate-on-scroll behavior with IntersectionObserver and Tailwind-friendly classes, sequencing element animations as they enter the viewport. It's the lightweight, dependency-free way to add scroll reveals to a page.

Para qué sirve

Fade/slide elements in as they scroll into view
Sequencing staggered scroll reveals
Adding motion without a heavy library
Tailwind-based scroll animations

Instalar

Instalar en Claude Code

# Add the marketplace, then install the skill in Claude Code:
/plugin marketplace add ibelick/ui-skills
/plugin install animation-on-scroll

# Or install manually into ~/.claude/skills:
git clone https://github.com/ibelick/ui-skills.git
cp -r ui-skills/animation-on-scroll ~/.claude/skills/animation-on-scroll

Instalar en Codex

# Codex reads SKILL.md skills from ~/.codex/skills (auto-detected):
git clone https://github.com/ibelick/ui-skills.git
cp -r ui-skills/animation-on-scroll ~/.codex/skills/animation-on-scroll

# Then reference the skill in Codex — it loads on demand.

Visitar Fuente (GitHub)

Explora herramientas de IA

Las mejores herramientas de IA que complementan tus habilidades

Lee artículos sobre IA y diseño

Consejos y tendencias en el mundo del diseño y la IA

Skills Relacionados

Frontend y Diseño

Frontend Design

Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics — pages, components, artifacts, and posters.

Claude Code Codex

Frontend y Diseño

Web Artifacts Builder

Construct complex, multi-component HTML artifacts for Claude.ai using React and Tailwind.

Claude Code Codex

Frontend y Diseño

Animation Systems

Product-grade web motion like Stripe, Linear, Apple, and Vercel — easing/duration defaults, choreography, performance, and reduced-motion.

Claude Code Codex