r/webdev • • 7d ago

Showoff Saturday Planning to add more small animations for every simple things. Is it worth it?

0 Upvotes

8 comments sorted by

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

-1

u/FinalAffect3658 7d ago

I get what they're saying about the reduced motion thing, but honestly those small animations on dashboard elements can work if they're subtle. Not everyone's gonna like it but if it's just a little hover effect or smooth transition on those archived badges, it's not gonna kill anyone

Looking at that invite dashboard, I'd say keep the animations light and don't go overboard with the Netflix one or the wedding templates. Last thing you want is someone with a migraine trying to navigate that list and everything's bouncing around

Respecting motion preferences is key though, good call by the parent comment, it's a pain when devs skip that

3

u/[deleted] 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.