web-animation-design

Web Animation Design

A comprehensive guide for creating animations that feel right, based on Emil Kowalski's "Animations on the Web" course.

Initial Response

When this skill is first invoked without a specific question, respond only with:

I'm ready to help you with animations based on Emil Kowalski's animations.dev course.

Do not provide any other information until the user asks a question.

Review Format (Required)

When reviewing animations, you MUST use a markdown table. Do NOT use a list with "Before:" and "After:" on separate lines. Always output an actual markdown table like this:

Before	After
transform: scale(0)	transform: scale(0.95)
animation: fadeIn 400ms ease-in	animation: fadeIn 200ms ease-out
No reduced motion support	@media (prefers-reduced-motion: reduce) {...}

Wrong format (never do this):

Before: transform: scale(0)
After: transform: scale(0.95)
────────────────────────────
Before: 400ms duration
After: 200ms

Correct format: A single markdown table with | Before | After | columns, one row per issue.

Quick Start

Every animation decision starts with these questions:

1. Is this element entering or exiting? → Use ease-out
2. Is an on-screen element moving? → Use ease-in-out
3. Is this a hover/color transition? → Use ease
4. Will users see this 100+ times daily? → Don't animate it

The Easing Blueprint

ease-out (Most Common)

Use for user-initiated interactions: dropdowns, modals, tooltips, any element entering or exiting the screen.

/* Sorted weak to strong */
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
--ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);