GSAP is a JavaScript animation library. If you missed it, we invite you to read our article on GreenSock GSAP: animate your site’s HTML!
In this article we are going to take a look at the update GSAP released recently.
GSAP 3 brings a change both in the library’s weight and in the features it offers. Its weight has been halved compared with TweenMax (116 KB, the heaviest JavaScript library offered by GSAP, versus 58 KB for GSAP 3), while adding more than 50 new features.
Long-awaited new benefits in GSAP 3
GSAP’s many animations are not set in stone: they are easy to modify and adjust, and that is precisely their advantage.
An infinite number of animations is possible thanks to this JavaScript library. Whether in CSS with properties such as size or colour, on SVG attributes or on any numeric value at all, everything can be animated however you like.
It is even possible to create 2D animations with Pixi.js and 3D animations with Three.js. But the big change in GSAP 3 is that it is built as ES6 modules. GSAP is now supported in React, Vue.js and Angular with TypeScript compatibility, and all of it far more easily than the previous version of the JavaScript library allowed.
Given the many new features brought by the GSAP update, it will not be possible to explain them all in this article. We will illustrate a few of them, but for fuller explanations do consult the GSAP 3 documentation.
Changes in GSAP’s syntax
With GSAP 3, we can see a few changes in the way the code is written in several cases.
Easing
GSAP aims to be more readable and simpler, with less code for all the standard easing functions.
For example, the syntax:
Bounce.easeOutBounce.easeInBounce.easeInOut
becomes:
bounce.outbounce.inbounce.inOut
Duration
Duration is no longer a parameter of the variable but becomes an object placed inside the variable.
See the Pen GSAP – Syntaxe by Melanie (@mlazarus) on CodePen.
What’s more, as you can see, the TweenMax object is no longer there. The new update has merged the TweenMax, TweenLite, TimelineMax and TimelineLite JavaScript libraries into a single, clearer and simpler object: gsap.
To sum up, GSAP 3 set out to be more readable, with less code and therefore fewer errors. But don’t panic: GSAP has made sure the old syntaxes still work. So even though the TweenMax, TweenLite and other JavaScript libraries no longer exist in this new version, they are still supported thanks to aliases! That said, it is still recommended to use GSAP 3, at least for new projects. GSAP has made big changes, but nothing too brutal in the end.
Less code
The reduction in code also comes from parameters inherited from parent elements. Whereas with the old version of GSAP you had to rewrite the parameters on every moving object, even if the animation stayed the same, now, thanks to child elements inheriting their parents’ parameters, less code is needed. Child elements adopt the same behaviour as their parents.
See the Pen GSAP – Mouvement by Melanie (@mlazarus) on CodePen.
Infinitely extensible animations
GSAP 3 offers many animations that are already prepared to be used directly as they are. However, it is also possible to create your own animations.
Functions
You can write animations by hand in JavaScript, wrapping them in a function that you call whenever you want to use it.
See the Pen GSAP – Fonction by Melanie (@mlazarus) on CodePen.
The defaults value — here duration — is available directly in config.
MotionPathPlugin
With MotionPathPlugin, you can create a path and import it into the code as SVG.
For club members, there is an extra option. Thanks to the MotionPathHelper.create function, a curve appears in the browser, allowing you to draw and modify the path with the mouse by clicking and moving the various points on the curve.
Animations
Triggering
When it came to triggering animations, you used to have to use the Timeline object and work out when the next animation would start. That could quickly become complicated if you changed when the first animation started, because all the timings had to be recalculated.
All of that is solved in GSAP 3 thanks to the < and > symbols, which make it possible to define timing relatively. They indicate when the animation should start in relation to the last animation played.
See the Pen GSAP – Lancement by Melanie (@mlazarus) on CodePen.
Randomness
Random results are possible with the random parameter. You simply indicate numbers or a range of numbers depending on what you want, and the function returns a random value. This also works with colours.
See the Pen GSAP – Random by Melanie (@mlazarus) on CodePen.
Utility functions
Snap
Snap works like a magnet. It returns the value closest to the input value, based either on an increment or on an array of values. You can also specify a radius within which the value is snapped, applied around each increment.
See the Pen GSAP – Snap by Melanie (@mlazarus) on CodePen.
MapRange
mapRange makes it possible to transpose a value from one scale to a value on another scale. For example, with mapRange you can map the position of a mouse on a screen against the width of the screen as a percentage.
Interpolate
interpolate makes it possible to take the value located at a given point within a range of data. Let’s take an example with colours: the range starts at red and ends at orange. If we ask for the value at 50%, we get an rgba code that is a mix between the rgba code for red and the one for orange.
See the Pen GSAP – Interpolate by Melanie (@mlazarus) on CodePen.
Pipe
The pipe function makes it possible to use and combine several utility functions into a single variable.
See the Pen Numendo DOM Audio Viewer by Cédric Lambert (@clambert68) on CodePen.
GSAP 3 includes many new features for animating your DOM or your canvases, along with a few changes to the syntax and the parameters that will make your animations easier. Let your imagination do the rest by trying these animations out on your site or your application!
Feel free to read other articles on the Numendo blog!
