The thing that makes homemade animation look homemade
Someone animates a logo sliding in from the left. The logo is fine, the typography is fine, and the whole thing looks cheap. It is almost never the design. It is that the logo travelled at exactly the same speed for every frame of the move, and nothing in the physical world does that.
Fix the speed curve and the same animation, unchanged in every other respect, stops looking amateur. This is the highest-return single idea in motion, so it is worth understanding rather than just switching on.
What a keyframe actually stores
A keyframe is a value at a moment. "At 0 seconds, x = -400. At 0.4 seconds, x = 0." That is two facts. Everything between them is invented by the software, and the rule it uses to invent them is called interpolation.
The default rule in almost every tool is linear: divide the distance evenly across the frames. At 24 frames per second, a 0.4-second move is about ten frames, and linear puts the logo 40 pixels further along on every single one. Constant speed. It starts instantly at full pace and stops dead.
Easing means reshaping that curve so the value changes slowly at one end and quickly at the other. The object accelerates and decelerates, which is what things with mass do.
The three curves worth knowing
- Ease-out — fast at the start, slowing into the finish. Use it for anything arriving, and for anything responding to a click or tap. It moves immediately, so it feels responsive, and it settles gently, so it feels controlled. If you learn one curve, learn this one.
- Ease-in — slow at the start, fast at the finish. Use it for things leaving. It gathers pace and is gone.
- Ease-in-out — slow at both ends. Use it for something crossing the screen from one visible position to another, where the viewer watches the whole journey.
Where to find them:
- After Effects: select the keyframes and press F9 for Easy Ease, then open the Graph Editor (the graph icon in the timeline) and drag the bezier handles. Pulling the outgoing handle far to the right makes a long, slow tail. Nothing teaches easing faster than watching that curve while the preview loops.
- DaVinci Resolve (free): right-click a keyframe in the Inspector for ease options; the Fusion page has a proper spline editor with the same handles.
- Blender (free): the Graph Editor, with Bezier interpolation and handles you drag.
- CSS:
transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);. That particular curve is a strong ease-out and is a good default for interface motion. - Canva and CapCut give you named presets rather than curves. Less control, and for a title card that is often enough.
Duration, and why distance is not proportional
Rough starting points, then adjust by eye:
- Small interface changes — a toggle, a hover state, a colour change: 120–200 ms.
- A panel, a sheet, a modal appearing: 250–400 ms.
- A logo sting or a title card: 600 ms to a second, because you want it noticed.
Anything the user triggers repeatedly should sit at the short end. A 500 ms animation is delightful once and a tax on the fortieth use.
Distance matters, but not proportionally. Double the travel and you want roughly 1.4 times the duration, not double. A thing crossing twice the distance in the same time simply moves faster, which is what your eye expects of something further away.
Where this goes wrong
Ease-in-out on everything. It is the pleasant-sounding default, and on anything the user initiates it is wrong. A dropdown with a 400 ms ease-in-out spends its first hundred milliseconds barely moving. The user has clicked and seen nothing. They register that as lag, not as elegance. Use ease-out so it starts the instant they act.
Easing something too short to see it. Below about 100 ms there are not enough frames for a curve to read, and every curve looks the same. If you want a snappy feel at 80 ms, just make it linear and stop fiddling.
Assuming linear is always wrong. It is right whenever there is no start and no stop: a loading spinner rotating forever, a scrolling ticker, a looping background. Easing those makes them lurch.
Easing the wrong property. A fade has no mass. Opacity going from 0 to 1 with a heavy ease-in-out reads as hesitant rather than weighty. Ease movement and scale; keep opacity simple.
Check your own work today
Screen-record any animation you have made and step through it a frame at a time. Find the frame at the exact middle of the move. If the object is halfway across, the motion is linear, whatever the software told you. If it is roughly three-quarters of the way, you have a real ease-out, and it will already look better than it did.
Before you move on