What makes a good UI animation?

Good UI animation is fast, purposeful, and consistent. It guides attention, communicates state changes, and respects the user's time, typically resolving in 150 to 400 milliseconds for interface transitions.

Why does easing matter?

Easing describes how speed changes over the animation. Ease-out curves feel responsive because they start fast, while linear motion feels mechanical. Choosing the right curve is what separates polished motion from distracting motion.

How long should an animation last?

Most interface transitions feel best between 150 and 300 milliseconds. Larger movements such as full page transitions can run to 400 milliseconds, while tiny state changes like hover should stay under 150.

Should I respect reduced-motion preferences?

Yes. Always honor the prefers-reduced-motion setting by disabling or simplifying non-essential animation. It is an accessibility requirement, not an optional nicety, for users sensitive to motion.

What is the UI Animation Concept Generator?

Generate UI animation concepts covering transition type, duration, easing curve, and narrative purpose. A practical starting spec for motion designers and frontend developers discussing interface animation. It runs free in your browser on Gera Tools, with nothing uploaded.

UI Animation Concept Generator

Name: UI Animation Concept Generator
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

What this tool does

Motion is part of a product’s voice, but it is easy to specify vaguely. This generator produces a concrete UI animation concept: a named transition type, a duration in milliseconds, an easing curve, and the narrative purpose the motion serves. It is tuned to the interface context you pick, so a button concept stays snappy while a page transition gets more room to breathe.

How it works

The generator pairs your chosen context with a realistic specification. Transition types (such as fade, slide, scale, or a combined fade-and-slide) are matched to durations and easing curves that are known to feel right for that context. For example, micro-interactions get short durations with ease-out curves, while page transitions get longer durations with ease-in-out. The output includes the actual cubic-bezier or named easing value so developers can drop it straight into CSS. Everything runs locally in your browser.

Duration guidelines by context

Context	Typical range	Why
Hover state	80–150 ms	Feels instant; keeps the UI reactive
Button press / click feedback	100–200 ms	Confirms the action without delaying the user
Modal / dialog enter	200–300 ms	Gives the eye time to track where content appeared
Page / route transition	250–400 ms	Signals a meaningful navigation event
Loading / skeleton fade	300–500 ms	Long enough to be readable, short enough not to feel stalled

These are starting points. Actual feel depends on the distance an element moves and the easing applied.

Understanding easing curves

Easing describes how velocity changes over the animation:

ease-out (cubic-bezier(0, 0, 0.2, 1)) — starts fast, decelerates to a stop. Use for elements entering the screen; mimics how real objects arrive.
ease-in (cubic-bezier(0.4, 0, 1, 1)) — starts slow, accelerates away. Use for elements leaving the screen.
ease-in-out (cubic-bezier(0.4, 0, 0.2, 1)) — symmetric S-curve. Use for elements that move from one position to another without disappearing.
linear — constant speed. Rarely appropriate for UI; feels mechanical. Reserved for looping spinner animations.

The generator pairs each context with an easing curve that matches these conventions, so you can hand the spec to a developer and it will feel right without further tweaking.

Tips and examples

Use ease-out for elements entering the screen and ease-in for elements leaving; this matches how things feel in the physical world.
Keep durations short. If an animation feels slow, halve the duration before changing anything else.
Animate transform and opacity rather than layout properties like width or top, because those two are GPU-accelerated and avoid layout thrashing.
Always wrap non-essential motion in a prefers-reduced-motion media query so motion-sensitive users get a calm experience.
When handing off to development, share the exact cubic-bezier value — named keywords like ease and ease-in-out have slightly different values across browsers and design tools.