I have trouble using timelinemax add() function to create a callback function

[PIBC-QingYe]

As the example,I want to use add() to create a callback function at each timeline's beginning,and use this to change the describe.But when it run,the callback function can't get the right value and the i became undefinded.  

See the Pen zgrwJa by QINGYE (@QINGYE) on CodePen

[mikel]

Hi @PIBC-QingYe,

 

I do not understand what you want to achieve.
Here's a shot at the blind man.

 

See the Pen voLJdR by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[PIBC-QingYe]

Thanks mikel.The timeline has four animations,each of them has its own label.What i want to achieve are their labels.When each animation start , i want to use its label to change the panel's innerHTML.Just like your example,the value only show the last label.How to show the label "mylabel_0","mylabel_1","mylabel_2"when the timeline play?

[PIBC-QingYe]

I think I have find one way. Using the tl.time() to compare the label's time to judge reach which label.

btn.addEventListener('click', function(){
  var tl=new TimelineMax();
  var obj=$("#entrance");
  for(var i=0;i<4;i++){
    var label="mylabel_"+i;
    tl.addLabel(label);
    if(i%2==1){
      label="mylabel_"+i;
      tl.to(obj,5,{x:100+i*100, onUpdate:
                function(){
      var panel=document.getElementById("test");
      var t=tl.time().toFixed(2);
      for (var i = 0; i <labels.length; i++) {
        if(t>labels[i].time&&t<labels[i+1].time){
          panel.innerHTML=labels[i].name;
          break;
        }
       }; 
    }});
    }else{
      tl.to(obj,5,{y:100+i*100, onUpdate:
                function(){
      var panel=document.getElementById("test");
      var t=tl.time().toFixed(2);
      for (var i = 0; i <labels.length; i++) {
        if(t>labels[i].time&&t<labels[i+1].time){
          panel.innerHTML=labels[i].name;
          break;
        }
       };       
    }});
    }
  }
  tl.addLabel("mylabel_final");
  var labels = tl.getLabelsArray();
    for (var i = 0; i < labels.length; i++) {
    console.log("label name: " + labels[i].name + ", time: " + labels[i].time);
  };
});

But i'm not sure when using timescale() to change the play speed ,the tl.time() could compare labels'time well.

[mikel]

Hi @PIBC-QingYe,

 

More for fun. I do not know if that helps you.

 

See the Pen XvdmQw by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[PIBC-QingYe]

Thanks @mikel, I have tested my thoughts, the tl.time() could compare labels'time well.