Web Animation Design

This teaches you to build animations that feel right, based on Emil Kowalski's animations.dev course. It pushes you toward ease-out for entrances and exits, ease-in-out for on-screen movement, and to skip animations entirely for things users do 100+ times a day. You get concrete cubic-bezier values sorted by intensity, duration guidelines by element type, and the core performance rule: only animate transform and opacity. The most useful part is the decision framework at the top, four questions that cover 90% of animation choices. It also covers springs for gestures and when to use CSS versus JavaScript, with real tradeoffs instead of dogma.

skills.sh installs: 521
GitHub stars: 18
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add connorads/dotfiles --skill web-animation-design --agent claude-code

Installs into .claude/skills of the current project.

Files

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):

SKILL.md on GitHub