Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

UI animation guide v1.0.0

Use this resource to add purposeful animation to a web interface

New

  • 353 downloads
  • 215 likes
  • 186 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install ui-animation-guide

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent uses this guide to pick the duration, easing and technique for each animation: buttons, toggles, loading states, page transitions, lists. It favors fast properties, plans for prefers-reduced-motion and proposes animation tokens for a design system. You get consistent, lightweight animation.

Mostly picked by

Updated November 2, 2026

Diagram of easing curves and durations for animating interface elements.

Details

Works in
Install guides
Generates with
Your agent's model
Licence
MIT

Similar resources

View all

What you get

  • SKILL.md: principles, durations, easing curves and animation patterns
  • Examples in CSS, Framer Motion and GSAP
  • Performance rules (fast properties, the FLIP technique)
  • Accessibility and quality checklists

Good fit for

  • Adding micro-interactions to a site or app
  • Defining a duration and easing system for a design system
  • Making existing animation lighter and more accessible

Not for

  • Making videos or exported motion design
  • Designing complex animated illustrations
  • Replacing the documentation of a specific library

Tags

  • animation
  • ui
  • css
  • micro-interactions
  • accessibility

About

You say

"Add entrance animations to the product list and a loading state, without hurting performance."

Diagram of easing curves and durations for animating interface elements.

Skill published by travisjneuman under the MIT license.

Show more

Prerequisites

You bring
The code or a description of the interface to animate

How to use it

  1. Describe the interface and the elements to animate.
  2. Let the agent propose durations, easings and techniques from the guide.
  3. Test the result, including with reduced motion turned on.

Content preview

Files

  • LICENSE1.1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • SKILL.md17 KB

Origin and licence

Modified by PalateKit

Author
travisjneuman
Source
github.com/travisjneuman/.claude/tree/80adced2f6fc0cb54fadb0fd6f0d7429d1f84bd7/skills/ui-animation
Licence
MIT

Notice

Version modifiée de « ui-animation » (travisjneuman, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Does the guide require a library?

No. It compares CSS, the Web Animations API, GSAP, Framer Motion, anime.js and Lottie, and recommends CSS for simple cases.

Does it cover native mobile?

Only as general guidance (touch feedback, iOS and Android conventions). The code examples target the web.