WWW… Wednesday! GSAP 3 – Javascript Animation Made Easy

by Taylor Slattery | January 1, 2020

GSAP 3 is the latest update to the GreenSock Animation Platform, a simple to use library for creating HTML5 JavaScript animations. GSAP has been around for over a decade and over that time has made fans out of quite a few big names. Its products are used on the sites of essentially every industry giant, such as Google, Microsoft, and Amazon just to name a few.

GSAP offers an easy-to-use suite of features that rival dedicated animation software like Adobe’s After Effects. For those comfortable with JavaScript, it’s easy to jump in and get started, and for those who are a bit more green, GreenSock has a rich backlog of documentation to get you up to speed. Fair warning though, the library is incredibly robust, so for those starting from zero, there is quite a bit of reading ahead of you. That isn’t to say that it isn’t easy to get the hang of, though. The introductory material offers a wide array of examples with accompanying code which you can copy and paste into your own projects. It also serves as a great resource to refer back to when you aren’t quite sure which animation would best suit the task at hand.

gsap ease visualizer

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 master Adobe After Effects? Sessions College offers an online Adobe After Effects course and a wide variety of digital media courses and programs for the creative professional.

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 Web Design.

This blog is powered by Sessions College, the leading online school of visual arts.