.add() not firing in sequence

[BradLee]

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></div>

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`});
};

tl.add(move())
  .add(changeColor());

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

[Dipscom]

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

[Carl]

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;
};

http://codepen.io/GreenSock/pen/xORGjx?editors=0010

 

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.

 

[OSUblake]

Hey @Dipscom,

 

Just a little note about those backticks. They're used for template strings in ES6.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

https://developers.google.com/web/updates/2015/01/ES6-Template-Strings

[Dipscom]

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