Top 10 Reasons to use GSAP to Animate Transforms

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes f…


This content originally appeared on Blog and was authored by Blog

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details.

You may be surprised by how much work GSAP does under the hood to make animating transforms intuitive and performant. This video explains the top 10 reasons you should be using GSAP to animate transform-related values like scale, rotation, x, y, etc.

Watch the video

  1. Independent control of each component (x, y, scaleX, scaleY, rotation, etc.)
  2. Physics-based animations and dragging, plus advanced easing like Elastic and Bounce
  3. Snap to any increment or set of values
  4. Query values anytime with _gsTransform
  5. Relative values ("+=" and "-=")
  6. Directional rotation (clockwise, counter-clockwise, or shortest)
  7. Two different skew types ("compensated" and "simple")
  8. Consistency across browsers, especially with SVG
  9. Animate along a path
  10. Sequencing and on-the-fly controls

All of these features are baked into CSSPlugin (which is included inside TweenMax). See the docs for more information. Happy tweening!


This content originally appeared on Blog and was authored by Blog


Print Share Comment Cite Upload Translate Updates
APA

Blog | Sciencx (2019-05-23T20:45:17+00:00) Top 10 Reasons to use GSAP to Animate Transforms. Retrieved from https://www.scien.cx/2019/05/23/top-10-reasons-to-use-gsap-to-animate-transforms/

MLA
" » Top 10 Reasons to use GSAP to Animate Transforms." Blog | Sciencx - Thursday May 23, 2019, https://www.scien.cx/2019/05/23/top-10-reasons-to-use-gsap-to-animate-transforms/
HARVARD
Blog | Sciencx Thursday May 23, 2019 » Top 10 Reasons to use GSAP to Animate Transforms., viewed ,<https://www.scien.cx/2019/05/23/top-10-reasons-to-use-gsap-to-animate-transforms/>
VANCOUVER
Blog | Sciencx - » Top 10 Reasons to use GSAP to Animate Transforms. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2019/05/23/top-10-reasons-to-use-gsap-to-animate-transforms/
CHICAGO
" » Top 10 Reasons to use GSAP to Animate Transforms." Blog | Sciencx - Accessed . https://www.scien.cx/2019/05/23/top-10-reasons-to-use-gsap-to-animate-transforms/
IEEE
" » Top 10 Reasons to use GSAP to Animate Transforms." Blog | Sciencx [Online]. Available: https://www.scien.cx/2019/05/23/top-10-reasons-to-use-gsap-to-animate-transforms/. [Accessed: ]
rf:citation
» Top 10 Reasons to use GSAP to Animate Transforms | Blog | Sciencx | https://www.scien.cx/2019/05/23/top-10-reasons-to-use-gsap-to-animate-transforms/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.