DEV Community

Cover image for Why animations are not used so often?

Why animations are not used so often?

Carlos Wosiak
Updated on ・1 min read

As a freelancer web developer, I particularly enjoy create CSS and Javascript animations, but even though I think it is amazing, most of the websites that I visit don't use it, or use almost no animations.

With great power comes great responsibilities

So I'd like to ask you what you think of web animations, the performance cost is so high that it doesn't worth, or is there any other reason?

Discussion (4)

jdnichollsc profile image
J.D Nicholls

Maybe with Web Components you can reduce the amount of code, to use animations more often by only using html elements, check my example created with StencilJS =>

joshhadik profile image
Josh Hadik • Edited

I think a big part of it has to do with simplicity.

One of the most common UX mistakes beginners make (I know because I did it... alot) is to try to make websites look as ‘pretty’ as possible by filling space with pictures, icons, animations, etc.

This usually isn’t the right approach. You shouldn’t be focusing so much on how to make a webpage look pretty, and more on how you can lead users from where they are to where they want to be as quickly and inuitively as possible.

This doesn’t mean you can’t have fun with it, and it doesn’t mean you shouldn’t use images or animations ever, you just have to ask yourself, does <insert thing you want to implement> add or detract from the end user’s experience? And, unless executed to perfection, animations often end up creating more confusion then they’re worth.

qm3ster profile image
Mihail Malo

Performance cost, development cost, and then in most places they would just be distracting and not serve a business goal.

jdnichollsc profile image
J.D Nicholls

I understand business goal, but maybe because most of the time is complicated (you need to learn CSS, JS libraries, Adobe After Effects for JSON animations with Lottie, etc). Maybe we can improve that by adding good animations by only using html elements, check my example: