r/programming • u/kciter • 9d ago

How to Design an Animation

https://kciter.so/posts/how-to-design-animation/en/
79 Upvotes

90% Upvoted

6 comments sorted by

12

u/crisp_lynx_370 9d ago

we added some subtle micro-animations to our dashboard last year and the difference in perceived load time was noticeable. users on slower connections felt like things were snappier even when actual latency didnt change. the part about easing curves is something a lot of devs skip but it really does matter for making things feel natural vs robotic

12

u/Sopel97 9d ago

This is a good article, but my answer is NOT. Do not design animations. Do not do animations. Animations introduce latency and hamper interactivity. In your pipelining example you add 200-400ms of latency in displaying a simple message. This is already annoying, but it's even more annoying in real cases where there are interactive elements like buttons and state transitions. Nothing triggers me more in everyday software use than me being unable to properly interact with the UI until the animation finishes. I'm fed up with animations.

6

u/polaroid_kidd 9d ago

You move the mouse instantaneously move the mouse canto the button you want to click and then wait 400ms? 

Damn..  must be a pro CS:GO player...

Snark aside, I'm torn. Micro animations make a website come alive.  10 million micro animations on a single page will make me want shout "REALLY!?!?" at the designer while pointing at the results of their design... repeatedly.

5

u/Rentun 8d ago

It really is fucking annoying when you have to wait for animations to complete when doing stuff. 400ms might not sound like a lot, but human reaction time is a lot quicker than that for certain stuff, so if a 400ms mouse over animation needs to complete before you can click a button, it will feel extremely frustrating to deal with that application.

1

u/polaroid_kidd 8d ago

Uff, yeah I'm with you. Hover animations shouldn't block the click listener. I've never seen them applied that way internationally though and I legitimately couldn't think of a reason to have it that way..

2

u/ScottContini 8d ago

This is so cool! I’ve got no background in this area but this is an awesome introduction.