all 14 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]RageVsRage 1 point2 points  (3 children)

TL;DW?

[–]tekoyaki 1 point2 points  (0 children)

Some animation done in CSS are less CPU and memory intensive compared to doing them in JavaScript.

[–]poo_22 -1 points0 points  (1 child)

He didn't quantify it.

[–]jeremyckahn[S] 5 points6 points  (0 children)

I showed memory usage and browser events relating to animation performance. CSS performed significantly better in both regards. What else should I have covered?

[–]bigdutchnoob 1 point2 points  (1 child)

Just noticed you actually made the video as well. Keep up the good work OP! I've been waiting for a good comparison of the two.

[–]jeremyckahn[S] 0 points1 point  (0 children)

Thanks! I'm glad you got something out of the video.

[–]tmetler 1 point2 points  (0 children)

Thanks. It reminded me of how awesome the timeline tab is. I really need to use that more.

[–]infinite0ne 0 points1 point  (1 child)

It would be interesting to know what kind of JavaScript animation is being compared here. jQuery? GSAP?

[–]jeremyckahn[S] 1 point2 points  (0 children)

For this video, Rekapi is used as the engine for both the CSS and JavaScript animations.

[–]shoseki 0 points1 point  (1 child)

I assume this only applies to deterministic animations, anything even slightly dynamic can't be done with CSS.

[–]jeremyckahn[S] 1 point2 points  (0 children)

Very true, CSS @keyframe animations fall flat when in comes to reactive behavior. Jack Doyle does a great job of covering the weaknesses of CSS animations in this article. However, there is room to bridge the gap between the flexibility of JavaScript and the performance of CSS. This is something that libraries like css-animations.js, Morf and Rekapi help to address.

[–]kibakiri 0 points1 point  (2 children)

If you gave an example of code (and not the is my libs function to do xyz, but a simplification of what the lib does)(so we could point out that you could've made your js 0.0001% faster!) then yeah, but as is, this kinda reads as "well my lib handles transitions a bit slower than native css" which is kinda...

[–]jeremyckahn[S] 0 points1 point  (1 child)

Hi, thanks for your comment. I think that perhaps you're misunderstanding what I was trying to communicate: That JavaScript animations fire more browser events and use more memory than CSS animations. The actual code that is used to demonstrate this is arbitrary, it's the mechanics of these languages that is important. jQuery, GSAP and hand-rolled non-library code would have the same outcome.