DEV Community

George Ilias
George Ilias

Posted on

Should I use Javascript or Css for creating animations?

Hi everyone, I was wondering if it's better to use Javascript or CSS Or both for different occasions?

Top comments (5)

Collapse
 
drmandible profile image
DrMandible

Best practice is usually css if possible. It's usually more performant and has better support.

Of course, not everything can be done in css so then you must use js.

That said, if the css solution will be a lot of weird hacks, js might be better for readability. Do you have a particular implementation in mind?

Also, you'll get more replies if you use the question tag.

Collapse
 
giorgosilias profile image
George Ilias

No I don't have any particular implementation, I was just asking in general.

Collapse
 
giorgosilias profile image
George Ilias

I just have the impression that using Javascript is more Profesional or maybe that's not the case 😊

Collapse
 
drmandible profile image
DrMandible

If asked, you should probably be able to do whatever you're trying to do with javascript. But usually javascript is easier than css for anything beyond basic functionality anyways, so that shouldn't be a problem.

But take something like a simple color change or fade in animation. That should be done with css unless you can point to a specific reason why you need javascript. The reason is simple: css should be used for the "view" of your site whenever possible.

If someone else looks at your code (or if you come back after a long break), they'll go to the css first when they have a view issue they want to address. If they discover that a simple animation has been brought into the javascript, that might be a real problem because now they'll also need to learn about your js code. Best practice states that your js code is the "logic" of your page, so fiddling with that might have dire repercussions that might not be immediately obvious.

On the other hand, maybe this animation is based on the user's profile which also requires spinning up a server. And maybe that animation is part of an interactive user experience, like a character in a game that moves across the screen. Now we're getting into the realm of "logic" and it starts to become more appropriate to use js. I've seen simple games made entirely in css/html. But those are fun proofs of concept and often involve unusual usages of those tools which can cause serious headaches if you ever need to do more than the tools can be stretched into.

The most honest answer I can give is this: practice, practice, practice. Pick a task that you're not sure how to do and do it whichever way you can figure out. Maybe that means javascript. Once you're done, go back and try it with just html/css. Or maybe doing it the first time made you realize it would be impossible with html/css. Even in the 21st century, experience is still by far the best teacher. I know that was long winded but I hope it helps.

Collapse
 
weptim profile image
WEPUKHULU TIMOTHY

I think both but css is kind of better