Animation Principlesby Owl-Listener

Animation Principles Skill.

Give one transition a clear purpose and a motion profile that supports the interface state change.

UI Motion
Design Guidance

Source Review · Animation PrinciplesSKILL.md

Task UX Produces • A motion rationale for one interface event • Easing, duration, and sequence recommendations • Interruption and reduced-motion behavior Before You Start Provide the interface's before and after states, trigger and target devices. Use a runnable preview to check timing, interruption and reduced-motion behavior.

Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Refine One UI Animation

A single-motion design guide covering easing, duration, choreography, interruption, and reduced motion.

Source-based workflowNot an execution benchmark

The Working Approach

Animation Principles is a focused motion-design guide for one UI movement. It connects easing direction, duration, staging, and follow-through to what the user should notice. An entrance, exit, emphasis, loading treatment, or transition has a different job.

The source includes timing ranges and stagger suggestions, but these are starting points rather than measured requirements for every interface. It also asks for interruptible behavior, reduced-motion support, and checks on lower-powered devices. Product-wide motion tokens belong to a different task.

Expected Deliverables

A motion rationale for one interface event
Easing, duration, and sequence recommendations
Interruption and reduced-motion behavior

See the Example Brief

From Brief to Review

01
Name the State Change
Identify what the animation communicates and which element deserves attention first.
02
Tune the Movement
Choose an easing profile and duration appropriate to entrance, exit, emphasis, or transition.
03
Check the Alternatives
Review cancellation mid-flight, reduced-motion behavior, and perceived responsiveness on target devices.

02 When to Use It

When to Use It

Provide the interface's before and after states, trigger and target devices. Use a runnable preview to check timing, interruption and reduced-motion behavior.

A Good Fit

A Modal EntranceUse it to make one incoming surface feel responsive and intentional.
A Distracting TransitionUseful when the interaction works but its pacing or choreography feels wrong.

Limits to Check

Not a Full Motion SystemThe source separates this from product-wide duration and easing tokens.
Ranges Need ContextSuggested milliseconds should not override actual interaction testing.

Bring These Inputs

Trigger and StatesShow the before state, action, and resulting state.
Attention GoalSay what the viewer should understand from the movement.
Device ConstraintsIdentify reduced-motion and performance needs.

03 Decisions That Matter

Decisions That Matter

Purpose Over Decoration
The motion is judged by the state change it communicates.
Interruption Matters
A transition must tolerate another user action before it finishes.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Load this task's SKILL.md from the designer-skills repository in your agent's supported skill location. No universal installer command is established by the entry file.

Upstream Source File

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/animation-principles/SKILL.md

Provide the interface's before and after states, trigger and target devices. Use a runnable preview to check timing, interruption and reduced-motion behavior.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief

Use animation-principles to tune this filter-panel entrance. Explain the easing and duration, coordinate the panel and content, and define what happens if it closes halfway through. Include a reduced-motion alternative and avoid adding decorative loops.

Inspect the Result

Check the actual output against these observable criteria.

The animation communicates a specific change.
A second action can interrupt it cleanly.
Reduced-motion behavior remains understandable.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesign Read the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner: Owl-Listener
Repository: Owl-Listener/designer-skills
Skill File: interaction-design/skills/animation-principles/SKILL.md
License: MIT
Reviewed Snapshot: 2026-10-07 · 9a6930cf84a8

Editorial Source Summary

A single-motion design guide covering easing, duration, choreography, interruption, and reduced motion.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Does this define all motion tokens?

No. Its stated scope is one motion; a motion-system skill handles product-wide tokens.

Are the timing ranges universal?

Treat them as design guidance to test in context, not guaranteed optimal values.

Should loading always be animated?

The source lists loading patterns but requires motion to serve a purpose and respect accessibility preferences.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesign Browse Design Skills