skills.rest
j172
j172COMMUNITY
Explore all skills by this author →
Website𝕏@j172GitHub

animate

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

Updated Jul 30, 2026
Search Tags:#animation#ui design#motion#easing#reduced motion#springs#css transitions
One-click install
npx skills add https://github.com/j172/bid --skill animate-j172
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animate
Source: https://github.com/j172/bid/tree/main/agent/skills/animate
Command: npx skills add https://github.com/j172/bid --skill animate-j172

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Deciding whether and how to animate a UI element is error-prone: wrong easings, sluggish durations, layout-thrashing properties, and missing reduced-motion support make interfaces feel cheap. This Skill turns a motion request into a reviewed implementation by walking a fixed decision sequence — should it animate, what purpose, which tool, which properties, which curve and duration, how it interrupts and exits. ## Core Features & Use Cases - Gated decision sequence: Rejects animations for high-frequency or keyboard-triggered actions before writing any code, and names the purpose (feedback, spatial consistency, state indication) before choosing ingredients. - Opinionated implementation rules: Enforces transform/opacity-only properties, strong custom cubic-bezier curves, sub-300ms UI durations, transform-origin at the trigger, and springs for interruptible gestures. - Ready-to-build recipes: RECIPES.md provides implementations for button press, dropdown, tooltip, modal, drawer, toast, accordion, stagger, hold-to-confirm, tab indicator, scroll reveal, and drag-to-dismiss. - Use Case: Ask to animate a dropdown menu, and receive CSS using var(--transform-origin), a 200ms strong ease-out, scale(0.95) entry, plus reduced-motion and hover gating shipped together. ## Quick Start Ask the agent to animate a component, for example: add an entrance animation to my modal dialog with a backdrop fade.

Frequently Asked Questions about animate

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

FAQPage Schema
How do I animate a dropdown or popover in CSS?▼

Use a CSS transition on opacity and transform with a strong ease-out curve around 200ms, starting from scale(0.95) and opacity 0. Set transform-origin to the trigger element so the panel appears to grow out of what was clicked.

When should I use CSS transitions versus a Motion spring?▼

Use CSS transitions for state toggles, hovers, and predetermined motion since they run off the main thread. Use Motion springs for drag gestures, interruptible motion, and elements that should carry velocity through an interruption.

Why should UI animations avoid ease-in and scale(0)?▼

Ease-in starts slow, delaying the exact moment the user is watching, making interfaces feel sluggish. Scale(0) looks unnatural because nothing real appears from nothing; start from scale(0.9-0.97) with opacity 0 instead.

Which CSS properties are safe to animate for performance?▼

Animate only transform and opacity, which skip layout and paint and run on the GPU. Animating width, height, margin, padding, top, or left triggers layout and paint on every frame; clip-path is a sanctioned exception.

When should a UI element not be animated at all?▼

Skip animation for actions fired 100+ times per day, such as keyboard shortcuts or command palette toggles. Near-imperceptible motion suits tens-of-times-daily actions, while standard animation fits occasional elements like modals and toasts.

How do I handle reduced motion in CSS animations?▼

Wrap motion in a prefers-reduced-motion media query that keeps opacity and color transitions but drops transform-based movement. Reduced motion means fewer and gentler animations, not zero, so comprehension aids remain.

Related Skills

Explore More Design & Creative Skills→
taxmaxitaxmaxi
1

pick-ui-library

Selects animation and UI primitive libraries for React web interfaces.

Official
Intermediate
emilkowalskiemilkowalski
27.6k

review-animations

Review animation and motion code for craft regressions.

Community
Advanced
fusenginefusengine
22

adding-animations

Implement Framer Motion animations, transitions, and hover effects for UI components.

Community
Intermediate
m-de-graaffm-de-graaff

finding-animation-opportunities

Scans interface code for moments that benefit from motion and proposes exact animation recipes.

Community
Intermediate