skills.rest
squidllee
squidlleeCOMMUNITY
Explore all skills by this author →
GitHub

animate

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Deciding whether and how to animate a UI element is error-prone: wrong easings, sluggish durations, non-composited properties, and missing reduced-motion support make interfaces feel sluggish or inaccessible. This Skill turns a motion request into a reviewed implementation by walking a fixed decision sequence — gate, purpose, tool, properties, easing, interruption, accessibility. ## Core Features & Use Cases - Decision-gated construction: A frequency gate rejects animation for high-frequency or keyboard-triggered actions before any code is written, and a purpose check (feedback, spatial consistency, state indication) blocks decorative motion on functional UI. - Opinionated ingredient tables: Fixed easing tokens (cubic-bezier curves), duration ranges per component type, and spring configs eliminate guessed values, with rules like transform/opacity-only properties and transform-origin at the trigger. - 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 with scale-from-trigger origin, a 200ms strong ease-out, starting/ending style states, hover gating, and a prefers-reduced-motion variant. ## Quick Start Ask the AI to animate a component, for example: add an entrance and exit animation to my modal dialog with a backdrop.

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 transform-origin set to the trigger element, scaling from 0.95 with opacity 0 over 150-250ms. Apply a strong ease-out curve like cubic-bezier(0.23, 1, 0.32, 1) rather than the built-in easing.

CSS transition vs Motion library for animations?▼

Use CSS transitions for hover, press, and state toggles; WAAPI for programmatic control without dependencies; Motion only when you need springs, layout animations, exit animations, or gesture-driven values. Pick the cheapest tool that fits the requirement.

When should a UI element not be animated?▼

Skip animation for actions triggered 100+ times per day or via keyboard shortcuts, like command palette toggles. Frequent hover effects should be near-imperceptible, and delight animations belong only to rare first-time moments like onboarding.

Why does my animation drop frames under load?▼

Animating width, height, margin, or top/left triggers layout and paint on every frame. Animate only transform and opacity, and in Motion use the full transform string instead of x/y/scale shorthands, which are not hardware-accelerated.

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

Wrap motion in a @media (prefers-reduced-motion: reduce) block that keeps opacity and color transitions but drops transform-based movement. Reduced motion means fewer and gentler animations, not zero animation.

How to implement drag to dismiss with springs?▼

Track pointer capture, dismiss on distance threshold or flick velocity, and set transform directly on the dragged element. Settle with a spring config like duration 0.5 and bounce 0.2 so interrupted drags keep their velocity.

Related Skills

Explore More Design & Creative Skills→
BetaHuhnBetaHuhn
1

bits-ui

Guide construction of headless Bits UI components in Svelte 5 projects.

Community
Intermediate
emilkowalskiemilkowalski
27.6k

review-animations

Review animation and motion code for craft regressions.

Community
Advanced
ahsanghalibahsanghalib

frontend-motion-review

Build, review, and audit frontend animation and motion code with evidence-backed findings.

Community
Advanced
JimmyTranDevJimmyTranDev
1

ui-animator

Implement accessible UI animations with CSS, Framer Motion, and React Native Reanimated.

Community
Advanced