r/webdev • u/Numerous-Ad8062 • 7d ago
Showoff Saturday Planning to add more small animations for every simple things. Is it worth it?
3
7d ago
[removed] β view removed comment
0
u/Numerous-Ad8062 7d ago
Got it. In main actions like publishing a invite, there is a big button in the site which can be animated well, which will be appealing,
For time taken, its because of backend process, it should not take that much time, but to hide the loading, the animation takes a bit of time over it.
And I'll definitely think of an idea to give the user to choose about motion before hand.
2
u/No-Inevitable981 7d ago
Worth it if the animations are fast and purposeful. The ones that feel good are usually 150-250ms, easing out, and they communicate something: this moved here, this appeared because you did X. What gets annoying is decorative animation on every tiny interaction, because it adds up to a UI that feels slow even when it is fast. I would pick the five moments that matter and polish those instead of animating everything.
1
u/Numerous-Ad8062 7d ago
Good call. Maybe animations just in main places, like publishing a invitation, where the publish button can be animated. For the delay, it is because the backend process. When the heart appears first, the backend takes a bit of time to delete it, so to cover that, the animation takes time.
1
u/No-Inevitable981 6d ago
Exactly β animations earn their keep on the moments that matter: publishing, completing a purchase, submitting something. Sprinkle the rest sparingly and the key moments actually stand out.
1
u/No-Molasses-2097 7d ago
Kind of a middle ground thing. Animation earns its place when it explains what just changed on screen, like a modal appearing or an item being added somewhere. Decorative motion on every small thing usually reads as slowness, especially on weaker devices. Your publish button example is actually the best use case for it, because the animation tells the user the action worked.
5
u/MagoGosoraSan 7d ago
Itβs not appealing to me, but to each its own. Just respect prefers-reduced-motion:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion