Back during my "flash master jim" days I had used greensock's tweenLite, TweenMax, and TimelineLite libraries in actionscript 3. Now, coming over to Javascript in an angular setting, I found it rather troubling to slide a div across the screen (although this was partly due to me not fully understanding the position css property at the time). There are basically two ways to do basic transformations and style changes in the html/js world: css animations (possibly with the help of ng-animate) and greensock animations.*
* Note: There may be other animation libraries, but for non-spritesheet animations these are by far the top two in terms of popularity and performance.
In general CSS animations have been described as "blazingly fast", and even my angular 102 instructor said "CSS is the fastest" (although he had never used greensock). Below, I've linked some interesting articles on the subject (obviously biased since they are on the greensock website).
Doubts About CSS Claims?
- Cage Match: https://greensock.com/transitions/
- The Untold Story on CSS Performance: http://greensock.com/css-performance
- Myth Busting Forum Post: http://greensock.com/forums/topic/8868-myth-busting-css-animations-vs-javascript/
The Truth
You can count on Jim to cut the BS ans tell it to you like it is. The truth is, both CSS and Greensock transitions are great. They are super smooth even on mobile devices. It really comes down to a matter of api preference and to a lesser degree what you are actually animating.
The Bottom Line
The bottom line is:
You have no reason to not have BUTTERY SMOOTH sliding, scaling, color changing, etc animations in your html/js/css project since you'll get it using either pure CSS or Greensock.
You can't go wrong really. Unless you use jquery... then you're screwed!
RSS Feed