3 ms·

I recently looked into using Velocity on a mobile application. I need simple animations but they need to be performant. I was dismayed to find that Velocity an

by jschrf 12y ago

I recently looked into using Velocity on a mobile application. I need simple animations but they need to be performant. I was dismayed to find that Velocity and almost every other animation library out there still uses DOM-based tweening rather than CSS transitions. Even some of the faster libs out there that leverage CSS transforms are still pushing frames manually and sucking up CPU cycles running code-based animations. Why are people so convinced that code-based animations are somehow faster or better than pure CSS transitions? I certainly understand and appreciate the flexibility of code-based animations (easy chaining, full control, older browser support etc.), but for simple things like panels sliding in and out of view, nothing beats transform3d and transitions on platforms when these things are available (which is most mobile devices, these days).

LocalPCGuy 12y ago
Here is a good article describing why animations done with JS (DOM-based) can be as performant, or even more performant, than CSS animations. http://davidwalsh.name/css-js-animation http://davidwalsh.name/css-js-animation and this one (about GSAP, not Velocity) http://css-tricks.com/myth-busting-css-animations-vs-javascript/ http://css-tricks.com/myth-busting-css-animations-vs-javascr... Choose the right tool for the job. Sure, for simple things, CSS transitions are likely the right tool. For more complex animations where you need more control over them, frameworks like these are invaluable.
purpleturtle 12y ago
Fear not. Your performance concerns are mostly unwarranted (creator or Velocity here). Here are some articles to consider reading that help debunk this myth: http://css-tricks.com/myth-busting-css-animations-vs-javascript/ http://css-tricks.com/myth-busting-css-animations-vs-javascr... http://davidwalsh.name/css-js-animation http://davidwalsh.name/css-js-animation http://www.sitepoint.com/incredibly-fast-ui-animation-using-velocity-js/ http://www.sitepoint.com/incredibly-fast-ui-animation-using-... http://www.smashingmagazine.com/2014/09/04/animating-without-jquery/ http://www.smashingmagazine.com/2014/09/04/animating-without... https://developers.google.com/web/fundamentals/look-and-feel/animations/css-vs-javascript?hl=en https://developers.google.com/web/fundamentals/look-and-feel... For what it's worth, Velocity is a fairly new library. I wouldn't have gone down the path of JavaScript-based animation had my research and testing demonstrated that it was appreciably inferior in any way.
- jschrf 12y ago
  Hey, thanks for the links. Also, nice job on Velocity. I'm still unconvinced that tweening is the way to go in most animation use cases (basic combinations of slides, fades, etc) The bottom line is this: Most animation libraries write to the DOM every "frame". That's bad. If you need complex timing control, nested timelines, hierarchical animations, etc. then a code-based solution will get you those things. However, they come at a cost and that cost is performance. I think that if you can represent an animation in pure CSS, it will always be faster than implementing it in code, but I'm happy to be proven wrong :)

by jschrf 12y ago

LocalPCGuy 12y ago

Here is a good article describing why animations done with JS (DOM-based) can be as performant, or even more performant, than CSS animations. http://davidwalsh.name/css-js-animation http://davidwalsh.name/css-js-animation and this one (about GSAP, not Velocity) http://css-tricks.com/myth-busting-css-animations-vs-javascript/ http://css-tricks.com/myth-busting-css-animations-vs-javascr... Choose the right tool for the job. Sure, for simple things, CSS transitions are likely the right tool. For more complex animations where you need more control over them, frameworks like these are invaluable.

purpleturtle 12y ago

Fear not. Your performance concerns are mostly unwarranted (creator or Velocity here). Here are some articles to consider reading that help debunk this myth: http://css-tricks.com/myth-busting-css-animations-vs-javascript/ http://css-tricks.com/myth-busting-css-animations-vs-javascr... http://davidwalsh.name/css-js-animation http://davidwalsh.name/css-js-animation http://www.sitepoint.com/incredibly-fast-ui-animation-using-velocity-js/ http://www.sitepoint.com/incredibly-fast-ui-animation-using-... http://www.smashingmagazine.com/2014/09/04/animating-without-jquery/ http://www.smashingmagazine.com/2014/09/04/animating-without... https://developers.google.com/web/fundamentals/look-and-feel/animations/css-vs-javascript?hl=en https://developers.google.com/web/fundamentals/look-and-feel... For what it's worth, Velocity is a fairly new library. I wouldn't have gone down the path of JavaScript-based animation had my research and testing demonstrated that it was appreciably inferior in any way.

jschrf 12y ago
Hey, thanks for the links. Also, nice job on Velocity. I'm still unconvinced that tweening is the way to go in most animation use cases (basic combinations of slides, fades, etc) The bottom line is this: Most animation libraries write to the DOM every "frame". That's bad. If you need complex timing control, nested timelines, hierarchical animations, etc. then a code-based solution will get you those things. However, they come at a cost and that cost is performance. I think that if you can represent an animation in pure CSS, it will always be faster than implementing it in code, but I'm happy to be proven wrong :)