skills.rest
alex-jordan547
alex-jordan547COMMUNITY
Explore all skills by this author →
GitHub

animate

Build, review, and audit web animations using CSS transitions, springs, and gesture patterns.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Web interfaces often ship with abrupt state changes, missing press feedback, or motion that stutters and ignores reduced-motion settings. This Skill provides structured guidance and ready-to-adapt recipes for implementing, reviewing, and auditing web animations so motion serves a purpose instead of decorating aimlessly. ## Core Features & Use Cases - Implementation recipes: Adaptable CSS and JS patterns for buttons, popovers, tooltips, modals, drawers, toasts, accordions, staggers, hold-to-confirm, drag-to-dismiss, and WAAPI-driven motion. - Motion review and audit: Criteria for evaluating purpose, responsiveness, continuity, semantics, accessibility, and rendering cost, producing ranked findings rather than edits. - Gesture and vocabulary references: Detailed guidance on velocity handoff, interruption, and boundaries, plus a glossary for naming effects described informally. - Use Case: When a dropdown snaps open instantly, use the popover recipe to scale it out of its trigger with the correct transform-origin, then verify reduced-motion behavior in the browser. ## Quick Start Ask the agent to add an entrance animation to the dropdown menu component using the animate skill's popover recipe.

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?▼

Scale the popover out of its trigger using transform-origin set to the trigger position, transitioning opacity and transform over roughly 200ms with an ease-out curve. The transform-origin is the key detail so the panel appears to emerge from the clicked element.

How to implement drag to dismiss for a drawer or toast?▼

Track pointer position with pointer capture, then dismiss on either a distance threshold or measured velocity so quick flicks count. Settle with a spring so interrupted drags keep their velocity, and add damping past natural boundaries.

Should I use CSS transitions or a JavaScript animation library?▼

CSS transitions usually cover simple state changes. Use the project's installed motion library or WAAPI when gestures, exit animations, or layout animations need programmatic control, and prefer transform and opacity for compositor-friendly rendering.

How do I handle reduced motion in web animations?▼

Respect the prefers-reduced-motion setting by toning down or removing motion, and treat an instant state change as a valid reduced-motion treatment. Decorative copies of controls must be hidden from assistive technology and removed from focus order.

Why does my accordion animation cause jank?▼

Animating height forces layout recalculation on every frame, so keep the duration short and measure content height in JS rather than animating to auto. Prefer transform and opacity where they achieve the same visual result.

Can this skill be used for React Native or Expo animations?▼

This skill targets web animations in browsers. For React Native and Expo work, use the companion animate-expo skill, which applies the same motion principles to native gestures and runtimes.

Related Skills

Explore More Design & Creative Skills→
taxmaxitaxmaxi
1

find-animation-opportunities

Analyzes UI code to identify where motion would genuinely improve the interface.

Official
Intermediate
taxmaxitaxmaxi
1

animation-accessibility

Implements reduced-motion variants for web animations using CSS, Tailwind, and Framer Motion.

Official
Intermediate
coastdigitalgroupcoastdigitalgroup
2

accessible-accordion-implementation

Implement accessible accordion widgets with ARIA and keyboard navigation.

Official
Intermediate
bmiit145bmiit145

expo-animation

Builds React Native and Expo animations with Reanimated, Gesture Handler, and haptics.

Community
Advanced