skills.rest
raphaelmans
raphaelmansCOMMUNITY
Explore all skills by this author →
GitHub

animate

Implements UI animations with CSS transitions, WAAPI, and Motion springs.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Deciding whether, why, and how to animate a UI element is error-prone: wrong easing curves, sluggish durations, keyframes on rapidly-triggered elements, and missing reduced-motion support all make interfaces feel worse. This Skill turns a request for motion into a reviewed-quality implementation by walking a fixed decision sequence before writing any code. ## Core Features & Use Cases - Gated build sequence: First decides whether the element should animate at all (frequency tiers, keyboard-initiated disqualifiers), names the motion's purpose, then picks the cheapest tool — CSS transition, @starting-style, CSS animation, WAAPI, or Motion. - Opinionated ingredient tables: Fixed easing curves (cubic-bezier(0.23, 1, 0.32, 1) and friends), duration budgets per component type, spring configs, and GPU-safe property rules (transform/opacity only, never scale(0)). - Ready-made recipes: RECIPES.md ships 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 get a popover that scales from its trigger's transform-origin at 200ms with a strong ease-out, plus reduced-motion and hover gating shipped in the same change. ## Quick Start Ask the assistant to animate the dropdown menu opening so it scales out of its trigger with proper easing and reduced-motion support.

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 opening in CSS?▼

Use a CSS transition on opacity and transform, starting from opacity 0 and scale(0.95), with transform-origin set to the trigger element. Run it around 150-250ms with a strong ease-out curve like cubic-bezier(0.23, 1, 0.32, 1).

CSS transition vs Motion library for UI animation?▼

Use CSS transitions for hover, press, and state toggles you control with a class, and CSS animations for predetermined motion that must stay smooth under load. Reach for Motion only when you need springs, layout animations, exit animations, or gesture-driven values.

When should I use a spring instead of easing and duration?▼

Use a spring for drag with momentum, elements that should feel alive, and gestures the user can interrupt or reverse, since springs carry velocity through interruptions. A typical config is type spring with duration 0.5 and bounce 0.2, keeping bounce between 0.1 and 0.3.

Why does my animation drop frames under page load?▼

JavaScript-driven animation on the main thread drops frames while the browser loads, scripts, or paints, and Motion's x/y/scale shorthand props are not hardware-accelerated. Use CSS animations for predetermined motion or the full transform string in Motion so work runs on the GPU.

Should every UI element animate when it changes state?▼

No. Actions fired 100+ times a day, like keyboard shortcuts or command palette toggles, should never animate, and frequent interactions get only near-imperceptible motion. Reserve standard animation for occasional events like modals and toasts, and delight for rare first-time moments.

How do I handle prefers-reduced-motion in animations?▼

Ship a reduced-motion variant with every animation using a 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 stay intact.

Related Skills

Explore More Design & Creative Skills→
beelabstudiobeelabstudio

animate

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

Official
Intermediate
Free-The-AiFree-The-Ai
5

review-animations

Reviews animation and motion code against easing, duration, performance, and accessibility standards.

Official
Intermediate
brunoolfbrunoolf

motion-audit

Audits UI animations and produces prioritized motion fixes with exact values.

Community
Intermediate
anicca-labsanicca-labs

animations

Standardize UI motion and illustration animations in React Native/Expo apps.

Official
Intermediate