Motion & texture

Easing / Timing Function

Q: How do people describe a Easing / Timing Function in plain words?

why some animations feel smooth and others feel robotic that setting that makes motion start fast and slow down at the end what those cubic-bezier numbers actually do

Q: How do I implement a Easing / Timing Function?

Apply easing by role, not taste: entrances use ease-out (cubic-bezier(0, 0, 0.2, 1)), exits use ease-in (cubic-bezier(0.4, 0, 1, 1)), on-screen moves use ease-in-out. Keep UI transitions in the 150–300ms range. Use linear only for infinite loops and progress bars.

How speed is distributed over an animation’s duration—what makes motion feel mechanical or natural.

Also known as timing function · animation curve · cubic-bezier

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Easing / Timing Function".

Apply easing by role, not taste: entrances use ease-out (cubic-bezier(0, 0, 0.2, 1)), exits use ease-in (cubic-bezier(0.4, 0, 1, 1)), on-screen moves use ease-in-out. Keep UI transitions in the 150–300ms range. Use linear only for infinite loops and progress bars.

Anatomy:
- linear: Constant speed. Almost nothing in real life starts and stops this way—great for loops and progress bars only.
- ease-out: Fast in, slow out. Default for entrances.
- ease-in: Slow in, fast out. Default for exits.
- ease-in-out: Soft both ends; good for on-screen position moves.

Preferred API / pattern: `CSS easing / Framer Motion ease arrays / CSS vars`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Everything on default ease or linear
○Avoid: Entrance with ease-in
○Avoid: 400ms+ on every micro-interaction
○Avoid: Copy-pasting one cubic-bezier for enter and exit

In plain wordsHow people search for it

“why some animations feel smooth and others feel robotic”“that setting that makes motion start fast and slow down at the end”“what those cubic-bezier numbers actually do”

AnatomyOpen for part names

linear: Constant speed. Almost nothing in real life starts and stops this way—great for loops and progress bars only.
ease-out: Fast in, slow out. Default for entrances.
ease-in: Slow in, fast out. Default for exits.
ease-in-out: Soft both ends; good for on-screen position moves.

How to write itOpen for stack patterns

Web (HTML/CSS)transition-timing-function: cubic-bezier(...)

React + Tailwind + shadcn/uiCSS easing / Framer Motion ease arrays / CSS vars

SwiftUIAnimation.easeOut / .timingCurve

Ant Designtheme tokens motionEaseInOut / motionDurationMid

Notes

Easing is the first variable of motion quality—often more important than duration. Rule of thumb: entrances use ease-out, exits use ease-in, so arrivals feel snappy and exits clear space quickly. Linear belongs on infinite spinners and determinate bars; anywhere with a start and end, linear feels cheap. UI motion lives in the 150–300ms band; past ~400ms people start waiting.

Common mistakesHumans and models trip here

Everything on default ease or linear: the site feels wooden and you can’t say why.
Entrance with ease-in: the element crawls into motion and feels lagged.
400ms+ on every micro-interaction: users pay an animation tax on every click.
Copy-pasting one cubic-bezier for enter and exit: exit should leave faster.

More failure symptoms on AI broke it.

Related patterns

Spring AnimationMotion driven by stiffness and damping instead of a fixed duration curve—naturally overshoots, then settles.MarqueeContent scrolls endlessly in one direction in a seamless loop.Accordion / CollapseStacked headers that expand and collapse to show nested content.Skeleton ScreenPlaceholder shapes that mirror upcoming content so loading feels structured, not empty.

Spotted a wrong name or missing pattern?

Message on X