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());