CSS or scripted animations?

More and more often it looks like CSS animation are slowly moving towards JavaScript. It’s like every second day some new framework to do job that is supposed to be done by CSS come out.

When I started to learn about web design, one of the recommendations was to let CSS take care about visual side of page. JavaScript was used to make the page dynamic or create opportunities for interaction with visitor. Is this still valid today when CSS grew into something bigger that covers even those dynamic parts of web design? You can find many articles comparing speed and quality of animations created by CSS and JavaScript (sometimes with another additional library). Main goals of those test is to find out what is more suitable solution for creating and managing animations. This is even more important were more and more people are browsing the web on their smartphones and tablets. Smartphones are especially important for this subject because of their HW capabilities. What can be worse than slow performance or sucking up all power from battery.

With mobile device comes other hurdles too. What about standards that are supported by desktop browsers but not that much by mobile ones? What about devices or people who have disabled or blocked any scripting by default? How to deal with this? If you use CSS based animations you might be OK, but their options are limited and managing them too. If you decide to use JavaScript driven animations instead, how will you deal with disabled or blocked scripting? One solution might be using JavaScript as main “source” for all dynamics of the page and covering devices with active block of script by providing separated stylesheet that contains only animations. This way, everyone will be served with all content in appropriate context.

Sure, it has it’s down sides and limits but it’s still better than nothing. This issue is something that need to be solved. Using fallback is maintainable but it is not solution at all. It’s just a trick that might work here and there for a while. As the time goes, we will have to decide which side, CSS or JavaScript, to chose and work on it. It is always better to have one way that works everywhere than to have multiple that works poorly or are limited. Question is, who will have the last word.

Do you have any questions, recommendations, thoughts, advice or tip you would like to share with other readers of this blog, and me? Please share it in a comment. You can also send me a mail. I would love to hear from you.

Did you like this article? Please subscribe.

Are you on social media? Let's connect! You can find me on Twitter, GitHub and Dribbble.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.