Jump to content


.add() not firing in sequence

Moderator Tag
Go to solution Solved by Dipscom,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have 2 functions, each returns a TimelineLite instance. I have another timeline that is made up of these 2 returned timelines. The problem I'm having is the master timeline is not firing the returned timelines in sequence, they both fire immediately. Any ideas why?


div {
	width: 100px;
	height: 100px;
	background: tomato;

let div = document.querySelector(`div`);
let tl = new TimelineLite();

let move = () => {
	let tl = new TimelineLite();
	return tl.to(div, 1, {x: `100px`});

let changeColor = () => {
	let tl = new TimelineLite();
	return tl.set(div, {background: `blue`});


See the Pen KMgzyr by BradLee (@BradLee) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

Hi BradLee,


Thank you for providing a simple Pen. It really helps us to help you.


In your code you are using apostrophes ` rather than quotation marks ' (single)  or " (double). That will be an issue at some point.


But the real reason you think that .add() is not firing correctly is because in your second timeline, you have a .set() method call and that happens instantly. Right at the start of your master timeline.


In another words, it is doing exactly what you would expect. A way around that behaviour is to have a super short .to() tween with duration, say 0.01, rather than a .set().


Here's a fork of our Pen, working as you would expect.


See the Pen BzQyZy by dipscom (@dipscom) on CodePen

  • Like 5
Link to comment
Share on other sites

Just some more thoughts.


As Dipscom mentioned, the set() is firing immediately because it has no duration and because it was the first thing inside your nested tl timeline. When that tl is created with a set() at time(0) the engine says, "Oh no! I just created timeline and there is a set() which says I must do something immediately" So it renders the set() values. If your set() was placed at time(1) it would have waited. So an alternate to making your set() a very quick to() is to put immediateRender:false on the set() like:


let changeColor = () => {
let tl = new TimelineLite();
tl.set(div, {background: `blue`, immediateRender:false});
return tl;



Also, please note that I changed your code to return tl. 


You were doing

return tl.set(div, {background: `blue`, immediateRender:false});

tl.set() creates and returns a to() tween with no duration.

returning that set() as you have done will technically work, but if all you want is a single tween, there is no reason to also create a timeline using tl.set().

I imagine that may have just happened as you reduced things.


  • Like 3
Link to comment
Share on other sites

Thanks for the heads up Blake. I'm not reading up on ES6 - It would just make me depressed to know so many cool things are around the corner and not be able to even test them.


Ah the pains of the banner world...

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.