# Building an animation from scratch (/animate)

/animate is a Claude Code skill in the Web & Design section. It is maintained by emilkowalski and published under the MIT license. Decides whether something should animate at all and, if so, writes the animation with the right curve, duration and properties, reduced-motion support included.

- Web version: https://skills.sgomez.dev/en/s/animate
- Section: [Web & Design](https://skills.sgomez.dev/en/web.md)
- Author: emilkowalski
- License: MIT
- Source: https://github.com/emilkowalski/skills/tree/d16ebe60d09a5ba2afcb7054ede9d0a10c9f6128/skills/animate
- Updated 23 Sept 2026

## Use it when

- You want to add motion to a component, such as a card, a menu or a transition
- You are unsure whether something should animate and want a reasoned call
- You need the animation with curve, duration and reduced motion already settled

## Not for

- Critiquing animations that already exist, which is what review-animations is for
- Auditing a whole codebase, which is what improve-animations is for

## What you get

The animation code, plus a few lines stating the gate result (frequency and purpose), the ingredients used and what to check by eye.

## How to ask for it

- `Add an entrance animation to this card when it appears`
- `Make this menu feel more alive when it opens and closes`
- `Create a smooth transition between these two screens`

## Install

macOS · Linux:

```
curl -fsSL https://raw.githubusercontent.com/sgomez-dev/claude-skills/main/install.sh | bash
```

Windows:

```
irm https://raw.githubusercontent.com/sgomez-dev/claude-skills/main/install.ps1 | iex
```


## Author's description

Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.

## Questions about this skill

### Does it always write an animation?

No. If the action happens hundreds of times a day, like a keyboard shortcut, or has no clear purpose, the skill says so and writes no code. It offers a non-motion alternative instead.

### Does it include reduced-motion support?

Yes. prefers-reduced-motion support and hover gating for touch screens ship with the animation, not as a follow-up.

### Does it work for React Native apps?

No. For Expo and React Native apps there is animate-expo; this skill is aimed at the web.


- [How we review this](https://skills.sgomez.dev/en/methodology.md)