Timeline onComplete without animating after second init

[jukoor]

Hi all,

I'm programming a small game with three.js  which currently has 2 states : mainmenu and level-select.

In mainmenu i have a Timeline to animate some cubes in and out, code:

function startAnim() {

_mainmenu.splitAnimationTimeline = new TimelineMax({
        repeat: -1,
        repeatDelay: 1,
        yoyo: true,
        ease: Linear.easeNone,
        paused: true
      });

// gets added in a nested loop
_mainmenu.splitAnimationTimeline.to(_mainmenu.cubesArr[counter].position, 1, {
 x: i * moveOffset,
 y: j * moveOffset,
 z: k * moveOffset
}, 0.5);

_mainmenu.splitAnimationTimeline.play();
  
}

 

This is the main animation, some cubes that move in and out with the repeat and yoyo set. That works all good.

 

Now when i press the start-button i want to switch scene to level-select. Before actually switching i want to stop the current animation and tween the animation back to progress = 0 (another timeline is used to tween the progress of splitAnimationTimeline to 0).

This is the Logic of the animation reset:

var reverseFinishAnimations = new TimelineMax({
});
reverseFinishAnimations.to(_mainmenu.splitAnimationTimeline, 1.5, {
          progress: 0,
            // the problem is here. this works well on first try, but when i switch scene to level-select and back to main menu
  			// everything works, the oncomplete below fires after 1.5s but without the animation playing
          onComplete: function() {
            // change to other scene
            
          });

 

The Problem is this works fine on the first try but when i switch back from level-select to main menu (and call startAnim()) the reverseFinishAnimations animation does not tween the progress, BUT does fire the onComplete callback. So i guess the problem lies somewhere in the switching of main menu to level select and by calling the startAnim Function more than once. 

 

I hope that i could explain where my problem ist, its not easy to put up a fiddle on that one but i will if it helps.

 

Cheers

[GreenSock]

Welcome to the forums, @jukoor. 

 

It's very difficult to troubleshoot blind - is there any way you could create a reduced test case in codepen with only the essential code to reproduce the issue? 

 

My guess is that your _mainmenu.splitAnimationTimeline reference isn't what you think it is. Maybe try to console.log(_mainmenu.splitAnimationTimeline.progress()) before your reverse animation is created and see if it's already at 0 on the second time. 

 

Again, a super simple codepen would be extremely helpful in troubleshooting. 

[jukoor]

Ok i solved it after some extensive logging.

It had nothing to with TweenMax, but with my add / remove event listeners for changing scenes. They had wrong / different references to their callbacks, so they didn't got removed. This caused some kind of reference error which was the reason for the animation running only once.

Nevertheless thanks, this topic can get closed.

[GreenSock]

Thanks for letting us know. 

 

Happy tweening!