Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
PIBC-QingYe

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

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

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