The short verdict
- Most motion that feels wrong is too slow, too linear or too uniform.
- A small set of durations and two or three easing curves cover almost everything.
- Size and distance should change the timing: bigger moves take a little longer.
01Why the numbers matter
Two sites can use the same animation, a card sliding up as it enters, and feel completely different. One feels considered, the other cheap. Usually the difference is two numbers: how long it takes, and how its speed changes over that time. Generated sites often use one duration and one default curve for everything, which is why everything feels the same.
02Durations that work
| What moves | Typical duration |
|---|---|
| Button press, toggle | 80 to 120ms |
| Hover, focus, small colour changes | 150 to 250ms |
| Dropdowns, tooltips, small panels | 200 to 300ms |
| Elements entering on scroll | 400 to 700ms |
| Page transitions, large panels | 300 to 500ms |
| Hero sequences, signature moments | 800ms to 1.5s in total |
Interface feedback should be fast because people are waiting on it. Scroll reveals can be slower because nobody is waiting, but past about 800 milliseconds content starts to feel like it is arriving late.
03Easing, in plain terms
Easing is how speed changes during the movement. Real objects do not start or stop instantly, so linear motion, constant speed throughout, looks mechanical for anything except progress bars and loops.
- Ease-out starts fast and slows down. Right for things entering the screen or responding to a user. It feels quick because the movement happens early. GSAP’s power2.out and power3.out are good defaults.
- Ease-in starts slow and speeds up. Right for things leaving, briefly. On entrances it feels sluggish.
- Ease-in-out slow, fast, slow. Right for things moving from one place to another on screen, like a slider changing position.
- Back or elastic overshoots and settles. Fun in small doses, tiring everywhere.
04Stagger and distance
When several items enter together, a small delay between each one, 50 to 100 milliseconds, makes the group read as a sequence. More than that and the last item arrives too late. Cap the total, so a list of twenty does not take two seconds.
Distance should be modest. Elements rising 20 to 40 pixels as they fade in feel natural. A full screen-height fly-in feels like a slideshow. Bigger elements can travel a little further and take a little longer, because they carry more visual weight.
“Fast in, gentle landing. Most good motion is that sentence, repeated with care.”
05Make it a system
Pick three durations, say fast, medium and slow, and two or three curves. Name them, store them as variables, and use nothing else. When every animation on the site draws from the same set, the motion feels like one hand made it, the same way a type scale makes text feel consistent. When a new animation is added, the question is which of the existing values fits, not what new numbers to invent.
06Tune by feel, check by numbers
Start with the values above, then watch the animation at full speed, several times, on a real device. If it draws attention to itself, make it shorter or smaller. If you barely notice it but the page feels smoother, it is probably right.
07Questions people ask
Are there official guidelines for animation timing?
Design systems like Material Design publish recommended durations and curves. They are a good reference, and broadly match the ranges here.
Why does my scroll animation feel slow even at 600ms?
Probably the easing. A linear or ease-in-out curve at 600ms feels slower than ease-out at the same length.
Should mobile animations be faster?
Often slightly shorter, since distances on a small screen are smaller. Keep the same curves so it feels like the same site.
Can you tune the motion on my site?
Yes. Send us the link and we will tell you which numbers we would change.
