AnimationBeginner

Easing (Slow In / Slow Out)

Accelerating into and decelerating out of motion instead of moving at constant speed.

animation-principlemotionuicurves

Examples

Captured from this page's own interactive demo below.

Overview

Easing shapes a movement's speed over time: it starts slow, accelerates, then decelerates into its target — the classic 'slow in / slow out' of the 12 animation principles, known in code as ease-in-out curves.

It works because nothing physical moves at constant velocity: real objects have mass, so they accelerate and brake. Linear motion is the single loudest 'this is a computer' signal there is — the eye flags it as mechanical before the viewer can even say why.

The curve is also a tone control: strong easing with a long settle feels soft and luxurious, a sharp ease-out feels snappy and responsive, and different curve powers on the same 300ms movement produce completely different personalities.

Interactive Demo

same distance, same time — only the curve differslineareased

Duration800ms

Ease Power3

Use Cases

UI panels sliding in and outCamera moves between targetsCollectibles flying to the counterAny motion that currently looks linear

Best Practices

Do

✓Default every tween to an eased curve — linear should be the deliberate exception (loading bars, clock hands, conveyor belts).
✓Pick the family by intent: ease-out for things responding to input (feels immediate), ease-in-out for things moving on their own.
✓Keep UI easings short (150–350ms) — the curve shape reads even at small durations, and long UI tweens feel sluggish.

Don't

✕Don't use ease-in alone for arrivals — decelerating into a stop is what reads as natural; accelerating into a wall reads as a crash.
✕Don't stack different easings on properties that move together (position eased, scale linear) — the mismatch reads as glitch.
✕Don't hand-tune cubic-bezier values per element — standardize a small set of curves and reuse them everywhere for a coherent feel.

Common Mistakes

⚠Linear rotation or movement on decorative elements, instantly cheapening otherwise polished visuals.
⚠Easing the property but not the follow-through — an eased panel whose shadow/children snap separately.
⚠Using dramatic bounce/elastic curves on high-frequency interactions, which turns delightful into exhausting within minutes.

Implementation

Paste this into your AI assistant (Cursor, Copilot, Claude) to add the effect to your project.

Prompt

Add the "Easing (Slow In / Slow Out)" game-feel effect to my project: Accelerating into and decelerating out of motion instead of moving at constant speed.

How it works: Easing shapes a movement's speed over time: it starts slow, accelerates, then decelerates into its target — the classic 'slow in / slow out' of the 12 animation principles, known in code as ease-in-out curves.

Guidelines:
- Default every tween to an eased curve — linear should be the deliberate exception (loading bars, clock hands, conveyor belts).
- Pick the family by intent: ease-out for things responding to input (feels immediate), ease-in-out for things moving on their own.
- Keep UI easings short (150–350ms) — the curve shape reads even at small durations, and long UI tweens feel sluggish.

Avoid:
- Don't use ease-in alone for arrivals — decelerating into a stop is what reads as natural; accelerating into a wall reads as a crash.
- Don't stack different easings on properties that move together (position eased, scale linear) — the mismatch reads as glitch.
- Don't hand-tune cubic-bezier values per element — standardize a small set of curves and reuse them everywhere for a coherent feel.

Implement the effect in whatever engine/stack the project already uses and follow its existing code style. Wire it up where it makes sense.