Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Michael Brown
12,406 PointsHTML5, CSS3, and JavaScript
Why would someone want to code animations in HTML5 or CSS3, as apposed to doing it in a JavaScript framework?
1 Answer
Kevin Korte
28,149 PointsWhat if your user has Javascript turned off? Also, I believe CSS3 animations are going to load faster than a JS framework, and and animation code.
Michael Brown
12,406 PointsMichael Brown
12,406 PointsVery true. However, with that said wouldn't it be best practice to have a test case to see if JS is turned off if so, then run CSS3 animations instead?
Kevin Korte
28,149 PointsKevin Korte
28,149 PointsWhat's the advantage here? For JS users (which is probably 96% of users or more), the CSS3 animations are still going to load and bloat the file, even if you don't use them. You could test if the browser supports the CSS3 animation properties you need, and if not fall back to JS animations.
This is assuming that you can get the same results from both.
Depending on the complexity of the animation, it may be faster to run the animation in JS (maybe without a framework). I would imagine vanilla JS animations should be quite fast. It's something you should test for.
And there are certainly going to be use cases where the animation is complex enough you need Javascript.
Michael Brown
12,406 PointsMichael Brown
12,406 PointsYes this makes sense. I wasn't sure what the JS user demographic was but it would make sense to use JS animations as a fall back instead of vice versa. Thank you, Kevin.
Kevin Korte
28,149 PointsKevin Korte
28,149 PointsSure thing. Check out Modernizr as an HTML/CSS3 feature detect library if you haven't. It can be toned down to be super slim.
There are also conditional loaders like require.js, might help you.
And always, test, test, test. If you can do the animation in both, do it. I just wanted to challenge you a bit here. Codepen is a great resource to isolate your animations, build them both ways, and test their speed.
Michael Brown
12,406 PointsMichael Brown
12,406 PointsHaha Thanks for the challenge. Helps learn the material much better. I've used CodePen a few times but never require.js or Modenizr. I'll take a look at both. Thanks again Kevin.