Verified:GitHub

animate

Implements UI animations using CSS transitions, WAAPI, and Motion with defined easing and duration rules.

Updated Mar 14, 2026

Search Tags:#animation #motion #easing #reduced motion #springs #css transitions #ui motion

One-click install

npx skills add https://github.com/beelabstudio/ai --skill animate-beelabstudio

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: animate
Source: https://github.com/beelabstudio/ai/tree/main/skills/enabling/animate
Command: npx skills add https://github.com/beelabstudio/ai --skill animate-beelabstudio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Deciding whether and how to animate a UI element is error-prone: wrong easings, sluggish durations, missing reduced-motion support, and animations that should never exist. This Skill turns a motion request into a reviewed implementation that follows a strict decision sequence. ## Core Features & Use Cases - Gated build sequence: Decides first whether the element should animate at all based on usage frequency, then names the motion's purpose before writing any code. - Opinionated ingredient tables: Provides exact easing curves, duration ranges, and spring configs for buttons, dropdowns, tooltips, modals, drawers, and toasts — no approximated values. - Ready-made recipes: Ships RECIPES.md with implementations for common cases like drag-to-dismiss, hold-to-confirm, staggered entrances, and tab indicators. - Use Case: Ask it to animate a dropdown menu, and it returns a CSS transition using `transform-origin` anchored to the trigger, a strong ease-out curve at 200ms, plus reduced-motion and hover gating. ## Quick Start Ask the assistant to animate a dropdown menu opening from its trigger button using this skill.

Frequently Asked Questions about animate

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

FAQPage Schema

What easing should I use for UI animations?▼

Use ease-out for entering and exiting, ease-in-out for on-screen movement, and linear only for constant motion like progress indicators. Never use ease-in on UI, and prefer strong custom curves like cubic-bezier(0.23, 1, 0.32, 1) over built-in easings.