seek issue when trying to get to a label

[Retromonguer]

Helo guys,

 

I need some help with a little issue that is driving me crazy. 

 

In the codepen I have attached I am trying to animate three balls each one with it's own timeline and I have an animation handler that depending on the stage on which the app is it will move the animation point to one point or another of the timelines using labels. 

 

The animation when moving from the loop and seeking the 'animationOut' point should move to the top and out but keeps looping inside the 'loop' label step.

 

The seek function (lines 75, 80, 85, 91, 96) seems to not be working correctly. I am using version 1.19, if using version 1.10 it works for the label called 'animationOut' but not for 'animationReverse'. 

 

Can you guys help me out please? 

 

Cheers!

See the Pen LRNGdz?editors=0010 by FabioG (@FabioG) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Very nice of you to create the demo. Unfortunately, 100 lines of code is just way too much for me to try to read through and quite frankly I'm not even sure what I should be looking for or what the wrong behavior is.

 

In the short time I looked it over the one thing that struck me as potentially problematic is that you have code like

 

call(goToPoint, [tlBall3, 'loop']).
  addLabel('animationOut')

that has a function call happening at exactly the same time there is a label so if you try to seek to "animationOut" the call() is going to happen instantly and i suspect goToPoint is not what you want to happen.

 

maybe if you add the label a little later you get what you expect?

 addLabel('animationOut', "+=0.01")

If that doesn't work or make any sense, please try to reduce the demo as much as possible so that there is only enough code to clearly illustrate the issue... preferably a timeline with only 2 or 3 tweens and the button. I'm getting lost looking at all the timelines and stuff for the different balls.

 

Thanks!

[Retromonguer]

Hi Carl,

 

Thanks a lot for your response! I understand the codepen was a bit too long, sorry! I have managed to make it half the size

 

New Codepen: 

See the Pen 0653705a07a243530895856d7306fcef?editors=0010 by FabioG (@FabioG) on CodePen

 

To try to clarify a bit what I am trying to achieve is a staged animation. When the stage changes the animation will move to some other point in the time line. On top of this I need some animations to keep looping that is why I am using 'call()' to use this function 

function goToPoint(timeline, point){
  timeline.seek(point);
}

to keep looping inside the animations I need to.

 

 

 

I have tried what you said and it worked only for the first seek. It goes perfectly to label 

tlBall2.seek('animationOut'); 

 but, when trying to get to the last label 

tlBall2.seek('animationReverse');

It looks like it gets there but the animation is not done.

 

Cheers!

 

 

 

[Carl]

thanks for the new pen still having trouble.

you say it goes perfectly to "animationOut" on the first seek but I see "animationReverse" as the first seek in your switch.

case 0:
        tlBall2.seek('animationReverse');
        break;
    case 1:
        tlBall2.restart();
        break;
    case 2:
        tlBall2.seek('animationOut');
        break;

 

You then say "when trying to get to the last label animationReverse it looks like it gets there but the animation is not done

but in your timeline "animateOut" is clearly the last label

 

from(ball2,.6,{y:0, scale:0, ease: Back.easeOut.config(1.5)}).
  addLabel('loop').
  to(ball2,.7,{y:10, ease: Sine.easeInOut}).
  to(ball2,.7,{y:0, ease: Sine.easeInOut}).
  call(goToPoint, [tlBall2, 'loop']).
  addLabel('animationReverse', "+=0.01").
  to(ball2, 1,{y:-400,ease: Back.easeOut.config(1)}).
  addPause().
  addLabel('animationOut', "+=0.01").
  to(ball2, 1,{y:-400, ease: Back.easeIn.config(1)}).
  call(goToPoint, [tlBall2, 0]);

I don't mean to be nit-picky, trust struggling to imagine how it is supposed to work.

 

Can you please explain exactly what is supposed to happen in the code AND visually each time the button is pressed?

[Retromonguer]

Hi Carl, back again,

 

Sorry I think I was just playing with it at the moment you saw the code. But luckily I found the issue!

 

The problem was when going to a point in the timeline the value of a property gets the one on which ended the previous tween. In my case I had a Y:-400 in the previous tween so then when getting to the next label the animation was starting there instead of starting from the point in the Y axis on which the object was.At the end as you can see here I setted the Y manually before starting the animation.

tlBall2.
  from(ball2,.6,{y:0, scale:0, ease: Back.easeOut.config(1.5)}).
  addLabel('loop').
  to(ball2,.7,{y:10, ease: Sine.easeInOut}).
  to(ball2,.7,{y:0, ease: Sine.easeInOut}).
  call(goToPoint, [tlBall2, 'loop']).
  addLabel('animationOut', "+=0.01").
  to(ball2, 1,{y:-400, ease: Back.easeIn.config(1)}).
  call(goToPoint, [tlBall2, 0]).
  addLabel('animationReverse', "+=0.01").
  set(ball2, {y:0}).
  fromTo(ball2, 1,{scale:1}, { scale:0, ease: Back.easeOut.config(1)}).
  addPause();

Knowing this I have another doubt, is there a way to change the animation of an object starting from the state on which it is in a specific moment regardless of which state is that? I can think of a way using several timelines and swapping between them, or maybe calling a function to retrieve the state of the object and setting it before continuing with the animation, but I am sure there must be a better and cleaner way.

 

Thanks again!

[Carl]

From what I understand you seem to want to have many animations pre-made in a timeline and then somehow seamlessly transition to each at any time based on user interaction. That is very difficult to do (if not impossible) with a single timeline.  

 

I think you should consider creating the animations that you need when you need them. This way the newly requested animations will all start with the all the properties set to whatever values the ball currently has. 

 

So you might have a function called upAndDown() that creates a timeline that moves the ball up and down in a loop and then another function called scaleUp() that starts the scaling animation. 

[Retromonguer]

That was it Carl! Many thanks!!

 

I ended up creating my own functions like this self-managing their own timelines and creating them on the fly. It worked perfectly and run smoothly.

var animationOut = (function(){
  
  var tl = new TimelineMax({repeat: -1, yoyo: true});
  
  var animationOutObj = {
    start : start,
    stop : stop
  }
  
  return animationOutObj;
  
  function start(){
    if(tl.getChildren().length <= 0){
      tl.fromTo(ball2, 1, {scale: 0},{scale: 1, ease: Sine.easeInOut});
      tl.play();
    }
  }
  
  function stop(){
    tl.stop();
    tl.clear();
  }
   
})();

Thanks again for your help! :)

[Carl]

Awesome!