GreenSock has been around for more than a decade, making it one of the oldest JavaScript animation libraries. It works anywhere JavaScript runs and animates both DOM elements and JavaScript objects while maintaining its performance.
GreenSock is backward-compatible, framework-agnostic and easy for developers across all skill levels to pick up. As such, it is one of the most important tools for building intuitive and interactive websites.
The latest version, GSAP 3, comes with about 50 new features and lots of improvements on the previous versions, including:
Let’s take a more detailed look at some of the most important new features available in GSAP 3.
The new version comes with a simplified, more user-friendly API. GreenSock consolidated the “Lite” and “Max” features, which formed the core modules in the previous versions, into a single object named gsap
.
Take the following code, for example, which would have looked like this in previous versions of GSAP.
TweenMax.method('selector', {});
In GSAP 3, the above code would now look like this:
gsap.method('selector', {});
Similarly, the following line would have applied to previous versions.
TweenLite.method('selector',{});
In GSAP 3, it would translate to the following.
gsap.method('selector',{});
This change also affects the way timelines are created. The two blocks of code below would appear as follows in older versions of GSAP.
const tl = new TimelineMax(); tl.method('selector',{}) const tl = new TimelineLite(); tl.method('selector',{})
In the most recent release, it would be written like this:
var tl = gsap.timeline(); tl.method("selector", {});
The gsap
object, when chained to a method like to()
or from()
, returns an instance of a tween.
GSAP retained almost all of its old functionality and added a host of new features. In addition, GreenSock rebuilt the core from the ground up as modern ES modules.
The new GSAP update still recognizes the old syntax, since the Max and Lite features of the previous version are all aliased to keep legacy codebases from breaking. This saves developers the hassle of rewriting codebases to use GSAP 3.
The duration parameter of a tween is now defined in the vars
object, as opposed to previous versions where it was defined as a parameter for methods.
Take the following code, written for a previous version of GSAP.
TweenMax.from('selector', 1, {});
In GSAP 3, the above code can be rewritten as:
gsap.from('selctor', {duration:1})
Note: The old syntax still works because the new update is backward-compatible. This helps prevent breaking codebases that use the old syntax.
GSAP 3 enables you to specify default properties for your timeline. Child tweens inherit these values on creation.
In the older version, properties were set individually per tween, which led to code repetition. The update helps developers follow the don’t repeat yourself (DRY) principle, keeping code simple and more concise.
The following example is written for older versions of GSAP.
var tl = new TimelineMax(); tl.to(".selector1", 5 , {ease: Power2.Out, x:200}) .to(".selector2", 5 , {ease: Power2.Out, y:500})
This translates to the following in GSAP 3.
gsap.timeline({defaults:{ease:"power2.out", duration:5}}) .to(".selector1", {x:200}) .to(".selector2", {y:500})
Each tween inherits the ease and duration from the parent timeline. Inherited defaults are easily overwritten when another value is defined on a child tween.
The new update removed methods used to stagger, such as staggerTo()
, staggerFrom()
, staggerFromTo()
. This is now a parameter in the vars
object.
You can add staggers to tweens in the following format.
gsap.method("selector", { x:500, duration:2, stagger: 1 // adds a stagger of 1 second });
See the Pen
gsap-stagger by Anjolaoluwa (@jola_adebayor)
on CodePen.
You can also perform more advanced staggers by using the object syntax.
gsap.method("selector", { x:500, duration:2, stagger: { amount:2, // amount of time between staggered tweens }
The stagger object also takes in other parameters such as:
from
, which defines the point where the stagger should beginaxis
, which defines the axis to be staggered fromease
, which defines the type of ease the staggered item should haveYou can now define random value ranges to (such as random(-100, 100)
) or an array to be selected from, and GSAP will choose a random value to animate with.
This makes it easier to create advanced randomized effects.
gsap.method("selector", { x:"random(100, 200)" //chooses a random number between 1 and 100 });
Below is an example of using an array.
gsap.method("selector", { x:"random([0, 100, 400, 500])" //chooses a number in the array at random });
You can even have the random number rounded to the closest increment of any number.
gsap.method("selector", { x:"random(-100, 100, 5)" //chooses a random number between -100 and 100 for each target, rounding to the closest 5! });
This feature helps with positioning animations in a timeline. It puts a tween relative to the previous tween’s start or end time and removes the need to add labels through your code.
gsap.method('selector',{}, "<" ) //Inserts a tween at the start of the previous tween gsap.method('selector',{}, ">" ) //Inserts a tween at the end of the previous tween
GSAP has made 15 new utility methods available. Many of them return functions so that they can be added directly to tweens.
These methods include:
Keyframes are a way to define multiple states to which a single tween should be animated instead of creating multiple tweens with the same target.
You can pass an array of keyframes in the vars
objects and they’ll be perfectly sequenced.
gsap.method("selector", {keyframes: [ {x:500, duration:1,delay:2},//adds a delay of 2 seconds before the next animation {y:200, duration:1 } ]});
You can use the newest version of GreenSock in your project with either of the following methods.
You can include GSAP 3 in your project using CDN by adding the following to your HTML file.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
To install via package managers, use the following code.
#Using Yarn yarn add gsap #or Using NPM npm install gsap
Then, import it in your JavaScript file.
import { gsap } from "gsap";
The newly released GSAP 3 includes myriad updates to help you create even more stunning animations. There are more amazing features not covered in this article; for a full list of the updates, read the GSAP 3 release notes. The GreenSock team also put together a list of the top five features to check out in the new release.
Which new features stand out to you? Let us know in the comments section.
There’s no doubt that frontends are getting more complex. As you add new JavaScript libraries and other dependencies to your app, you’ll need more visibility to ensure your users don’t run into unknown issues.
LogRocket is a frontend application monitoring solution that lets you replay JavaScript errors as if they happened in your own browser so you can react to bugs more effectively.
LogRocket works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app’s performance, reporting metrics like client CPU load, client memory usage, and more.
Build confidently — start monitoring for free.
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up nowBackdrop and background have similar meanings, as they both refer to the area behind something. The main difference is that […]
AI tools like IBM API Connect and Postbot can streamline writing and executing API tests and guard against AI hallucinations or other complications.
Explore DOM manipulation patterns in JavaScript, such as choosing the right querySelector, caching elements, improving event handling, and more.
`window.ai` integrates AI capabilities directly into the browser for more sophisticated client-side functionality without relying heavily on server-side processing.
One Reply to "What’s new in GSAP 3"
Thanks for this. It’s been helpful.
I think you made a mistake:
x:”random(100, 200)” //chooses a random number between 1 and 100