Easing

Easing is the DNA of how motion feels. Two identical animations at identical durations will read as completely different interfaces if one uses ease-in and the other ease-out. Most designers pick easings by habit; most developers pick whatever the library defaulted to. A week of practice choosing easings intentionally, and being able to name why, is the difference between animations that feel engineered and animations that feel alive.

#The idea

Easing is the acceleration curve of an animation: how its speed changes over time. There are four families, and each has a distinct personality:

• Ease-out ([0, 0, 0.2, 1]). Fast start, slow landing. Reads as responsive: the motion launches instantly and settles gracefully. Use for anything entering or exiting the screen. This is the default for UI. When in doubt, pick this.
• Ease-in-out ([0.4, 0, 0.2, 1]). Slow start, fast middle, slow end. Reads as deliberate: mimics real objects accelerating then braking. Use for elements already on screen that are moving or morphing, such as a slider thumb dragging or a card shifting to a new grid position.
• Ease ([0.25, 0.1, 0.25, 1]). Asymmetric, slight acceleration at start. Reads as elegant for gentle changes. Use for hover states and color transitions, where you want polish without announcement.
• Linear ([0, 0, 1, 1]). Constant speed. Reads as mechanical. Almost never correct for UI except for progress bars and continuous loops (marquees, loading ticks). If you find yourself using linear for a discrete animation, you're almost certainly wrong.

There's a fifth you should actively avoid: ease-in alone. Slow start, fast end, abrupt stop. It reads as sluggish because the user waits for visual feedback. The only place ease-in belongs is in the exit phase of an ease-in-out pair.

#When it applies

• Ease-out: enter/exit transitions, revealed content, tooltips, menus, modals, notifications. The default for any UI motion you're unsure about.
• Ease-in-out: sliders, draggables settling, layout shifts, elements morphing between positions. Things that don't enter or exit, they rearrange.
• Ease: hover states, color/opacity transitions, subtle reveals where you want elegance without announcement.
• Linear: progress bars, loading ticks, marquee text, visualized timers. Anywhere constant-speed is the message.

#When it doesn't

• Never use ease-in alone for anything users interact with. The delay before visible motion is perceived as a lag.
• Don't use linear for discrete motion. A menu opening linearly looks like a robot. Reserve linear for continuous or time-based motion only.
• Don't mix easings on paired elements. If a modal uses ease-out and its backdrop uses ease-in-out at different durations, the two will feel disconnected. They should move as one unit.

#Implementation

Motion's built-in keywords:

<motion.div
  animate={{ x: 100 }}
  transition={{ duration: 0.2, ease: "easeOut" }}   // responsive
/>
 
<motion.div
  animate={{ x: 100 }}
  transition={{ duration: 0.3, ease: "easeInOut" }} // deliberate
/>
 
// For precision, use a cubic-bezier tuple directly:
<motion.div
  animate={{ x: 100 }}
  transition={{ duration: 0.2, ease: [0.19, 1, 0.22, 1] }} // ease-out-expo
/>

The four-easing palette shipped in Moro's lib/easings.ts is a reasonable default set. Expo variants feel especially crisp.

#Craft notes

• Ease-out-expo ([0.19, 1, 0.22, 1]) is the most useful advanced easing. The motion nearly teleports to 90% of its destination in the first third, then glides. Perfect for content entries.
• Overshoot curves ([0.34, 1.56, 0.64, 1]) add a subtle bounce past the target. Use for interactive feedback (a slider thumb on hover), never for content transitions.
• Snap is not easing. cubic-bezier(1, 0, 1, 0) is a step function and shouldn't live in a smooth-easing context.
• Emil's decision table is the simplest memorizable reference: entering/exiting, ease-out; morphing on-screen, ease-in-out; hover, ease; constant speed, linear.

#Exercises

1. Identify easings by sight. Watch five animations in five different apps. For each, guess the easing family. Then look at the code (many sites expose this in DevTools). How often did you guess right?
2. Break one intentionally. Take a good animation in your own project. Swap its easing to linear. Notice how immediately worse it feels.
3. Compare expo variants. Set up three copies of the same motion with ease-out, ease-out-cubic, and ease-out-expo. At 300ms, all feel similar. At 150ms, expo is noticeably sharper. Why?

#Study this in the wild

• Vercel Dashboard. Consistent ease-out-expo for every content surface. Gives the whole product a unified "snap" feel.
• Apple macOS menus. Classic ease-out on enter and exit. The baseline to study: this is what UI motion feels like when done right.
• Arc browser. Uses spring easings (lesson 4) for interactive elements, ease-out for transitions. Notice the distinction.

#Further reading

• easings.net — the definitive visual reference for cubic-bezier curves.
• Emil Kowalski: Easing.
• Matt Perry: The spring-easing primer.