by Taylor Slattery | January 1, 2020
Particularly useful is the Ease Visualizer. It allows users to see all of the various available types of easing in action. When you find the effect you’re after, simply copy the code and you’re off to the races. Because GSAP has been in use for so long, they’ve created an incredibly stable and bug-free environment for your animations. You can rest easy knowing that all of the hard work you put into your animations will look the same across all popular browsers, even those that may be a bit on the older side.
As I mentioned before, the platform is incredibly robust and it also has a large selection of plugins that give the library added functionality. Whether you’re looking to transition between colors, modify shapes on the fly, or adjust CSS properties, nearly every parameter can be animated. While this flexibility on its own is impressive, the fun doesn’t stop there. Animations can also be sequenced. Just like in a dedicated animation software, the animations can be placed in different orders to change the overall effect.
With the release of GSAP 3, GreenSock reduced the file size, simplified the API, and added keyframes and new utility methods. Another addition with GSAP 3, is MotionPathPlugin, which gives GSAP the ability to animate the motion of objects along a path. For those familiar with After Effects, this works in the same way. Simply take an SVG file, direct it to a path and watch it go. To learn more and get started with GSAP, visit the link here.
Taylor is the Managing Editor of Notes on Design. Taylor is a graphic designer, illustrator, and Design Lead at Weirdsleep.
Need to update your skills? Sessions College offers a range of online Creative Cloud courses in Adobe Photoshop, Illustrator, InDesign and more, as well as Certificate Programs in Graphic Design and Web Design.