Call methods in timeline

[kalreg]

Hi,

 

This is more theoretical question so no codepen today.

 

Consider a situation:

var obj = { 
  doSomething: function () {
   console.log("Go go go!");
   }
}

var animation = {
 myFunc: function() {
   var tl = new TimelineMax();   
   tl.to(someDiv, 10, {x: 100});   
   return tl;
 }
}

var next = {
 var tlMain = new TimelineMax();
 tlMain.add(animation.myFunc());
 obj.doSomething;
}

If i run a next object it will start animation, but before it ends i will have output from obj.doSomething. So doSomething doesnt wait for end of animation and it is obvious. Is there any easy way to run obj.doSomething when animation.myFunc() ends playing animation?

Of course i could put obj.doSomething in onComplete like:

var animation = {
 myFunc: function() {
   var tl = new TimelineMax();   
   tl.to(someDiv, 10, {x: 100, onComplete: function() { obj.myFunc() }});   
   return tl
 }
}

however if you imagine multiple situations like this it makes my code look like russian dolls - one in another, and next in another one - quite unreadable and hard to maintain.

Question is: how to have multiple obj.doSomething being executed when animation that is line above finishes. Is that possible?

Closest to this is using GSAP "set" function but it only sets css, do not execute whole functions

 

Thank you!

[kalreg]

I've found out that tl.set may have also onComplete so i can achieve my goal that way. Any other ideas?

[Carl]

Even with theoretical questions it helps to provide a CodePen so we have something to test and it helps validate the example you provide.

For instance your description is a bit confusing as you say:

 

"I could put obj.doSomething in onComplete" and then you show code that has my obj.myFunc() in an onComplete like:

tl.to(someDiv, 10, {x: 100, onComplete: function() { obj.myFunc() }});   

However, it sounds like you just need to use add() or call()

//good
tl.add(someFunction) 

//bad
tl.add(someFunction());

if you need to pass parameters to your function use call() https://greensock.com/docs/#/HTML5/GSAP/TimelineLite/call/

[kalreg]

Beautiful yet simple solution. Thank you so much Carl!

[kalreg]

Unfortunatelly my enthusiasm was premature. Here is pen i made to show my problem:

 

See the Pen MpvXVX?editors=1111 by kalreg (@kalreg) on CodePen

 

As you can see at the beginning i have one div, and then i create next one in timeline. However only first one has opacity set to 1. It looks like second div doesnt exist for timeline even if i put 2 second delay for setting the opacity. As if timeline only sees those dom objects that existed in the moment of creation the timeline.

I also use onComplete function in another "set" and it changes both divs color.

So "onComplete" checks in realtime, and other functions - do not.

 

Is there a way to use objects that where created after timeline was created (ie via call function) ? 

[Carl]

First, thanks for the demo. Tremendous help.

 

When tweens are created the engine searches for the targets (in this case the divs). Your object.create() method doesn't get called until after the timeline and all its child tweens are built which is why the set() only changes the opacity of the pre-existing div. 

 

You can use call() or add() to schedule the execution of a function that will run code that will find all the divs like:

 

var obj = {
  create: function () {
    $('body').append("<div>newly added div</div>")
  }
}


var tl = new TimelineMax();
tl.call(obj.create)


tl.set("div", {color:"pink"}, "+=1")//will make original, pre-existing div pink


tl.add(makeRed, "+=1")


function makeRed() {
  TweenLite.set("div", {color:"red"}); //colors both divs red
}

http://codepen.io/GreenSock/pen/PpKdJv?editors=0011

 

Does that help?

[kalreg]

Yes it helped me a lot! Thank you!