Why linear feels wrong
A linear animation progresses by the same amount every frame. Almost nothing in your physical experience moves that way: real objects accelerate, coast and decelerate. A linear move on screen therefore reads instantly as synthetic, the animation equivalent of a robot voice reading a bedtime story.
Linear still has legitimate jobs. Continuous, loop-like motion has no start or end to shape: a scrolling marquee, a rotating loader, a progress bar filling under steady work. Use linear when the motion is genuinely constant, and only then.
Reading a bezier
Most easing in software is a cubic bezier: a curve with time on the x axis and progress on the y axis, shaped by two control handles. You do not need the math, only the reading skill. Where the curve is steep, the element moves fast. Where it flattens, the element slows down. An ease-out curve is steep at the start and flat at the end, so the element launches quickly and settles gently.
The handles let you push this to taste. Pulling the first handle to the right delays the acceleration. Pulling the second handle to the left stretches the glide at the end. A curve like cubic-bezier(0.2, 0, 0, 1), a fast launch into a long soft landing, is a popular house style for expressive product motion, because it feels responsive and calm at the same time.
The standard menu
For ninety percent of decisions, four assignments cover it:
- Ease-out for entrances. Elements arriving on screen should be fast first and gentle last, so the interface feels responsive and the landing feels calm.
- Ease-in for exits. Elements leaving can accelerate away. A slow start on an exit reads as hesitation.
- Ease-in-out for moves within the screen. When an element travels from one resting place to another, symmetric acceleration and deceleration reads most natural.
- Linear for constant, endless motion only: loaders, tickers, ambient loops.
Springs
Springs are a different model entirely. Instead of a fixed duration and a curve, you set physical parameters, typically stiffness and damping, and the motion runs until the energy is gone. Their real strength is interruption: because a spring is a live simulation, it can absorb a new target mid-flight and redirect smoothly. That is why gesture-driven interfaces love them: a dragged sheet that is released mid-gesture needs physics, not a stopwatch.
Lower damping gives a livelier settle with visible oscillation; high damping stops cleanly with no overshoot. For choreographed sequences like product videos, where nothing gets interrupted and every impact has to hit a musical beat, fixed durations with bezier curves stay easier to direct. That determinism is also why the Vembie Motion Engine is built on explicit durations and curves: every frame has to land exactly where the music says it should.
Common mistakes
- One curve everywhere. Entrances, exits and moves have different jobs. Giving them all the same ease flattens the entire piece.
- Ease-in on entrances. The slow start makes the interface feel like it ignored the user for a beat before responding.
- Overshoot on text and data. Bounce belongs on shapes and cards. Letters and numbers need to land exactly where they will be read.
- Dramatic easing on opacity. Fades usually want gentle, almost linear curves; aggressive eases make them read as flicker.
- Fixing bad timing with fancier curves. If a move feels wrong at every ease you try, the duration or the choreography is the real problem.
Curves are a fast skill to build. Pick one transition you see daily, work out which ease it uses, and imagine the alternatives in its place. After a week of that, defaults stop being invisible, and you will never accept them by accident again.