animation

Animate UI transitions and state changes with transform and opacity.

3|Updated May 28, 2026

Search Tags:#a11y #animation #ux #transitions #motion-design #ui-motion #css-animations

Ready to run

npx skills add https://github.com/mahg-es/araya --skill animation-mahg-es

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: animation
Source: https://github.com/mahg-es/araya/tree/main/skills/animation
Command: npx skills add https://github.com/mahg-es/araya --skill animation-mahg-es

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Static interfaces feel dead. Gratuitous motion frustrates users, drains battery, and triggers motion sensitivity. This skill designs animations that serve a purpose — providing feedback, directing attention, or making state changes understandable — while respecting user preferences and performance.

Core Features & Use Cases

Purpose-driven animation guidelines to enhance feedback, attention, state transitions, and loading indicators.
Accessible motion design that respects users' reduced-motion preferences and performance budgets.
Reusable design tokens and patterns for common UI interactions (transitions, toasts, accordions, charts).

Quick Start

Integrate motion tokens and CSS transitions to apply purposeful UI animations across the app with minimal changes.

Frequently Asked Questions about animation

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

FAQPage Schema

How do I add accessible UI motion that respects reduced-motion preferences?▼

Accessible UI motion requires designing animations that provide feedback while respecting user preferences. You can apply purpose-driven transitions and state changes that automatically adjust for reduced-motion, ensuring your interface remains usable without triggering motion sensitivity.

What is the best way to animate page transitions without causing layout shifts?▼

The best way to animate page transitions without layout shifts is to only animate transform and opacity properties. This approach maintains performance budgets and prevents page reflows, ensuring smooth state changes across modern web or app interfaces.

How do I design CSS animations for loading states and data visualizations?▼

Designing CSS animations for loading states involves applying purpose-driven motion to guide user attention and improve feedback. You can use reusable motion design tokens and patterns to animate loading indicators and data visualizations consistently.

Can I use motion design tokens for common UI interactions like accordions and toasts?▼

Yes, you can use reusable motion design tokens to standardize common UI interactions. These tokens define consistent transition patterns for accordions, toasts, and feedback elements, allowing you to apply purposeful motion with minimal code changes.

Why does gratuitous UI motion frustrate users and drain battery?▼

Gratuitous UI motion frustrates users because it lacks purpose, drains battery, and triggers motion sensitivity. Purpose-driven animation solves this by using motion only to provide feedback, direct attention, or clarify state changes while respecting performance budgets.

When should I not use UI animations in my web interface?▼

You should not use UI animations when they fail to provide feedback, direct attention, or clarify state changes. Avoid motion that ignores reduced-motion preferences, exceeds performance budgets, or animates properties beyond transform and opacity.