onComplete won't work after tl.reverse()

[alx]

Greetings! To replicate my problem, I created this simple codepen. I can't figure it out😵. All I want is: click on the 'link' -> menu animation reverses -> 'container' turns red. This is where the onComplete comes in; the sequence is important for just one reason, the 'container' turning red is actually going to be the destination of the link or simply speaking, the window.location. Basically, the menu will close like it opened and then the browser can refresh...but because I can't get the onComplete to work, the brower refreshes while truncating the animation.

See the Pen abXomzz by alxhrrs (@alxhrrs) on CodePen

[mvaneijgen]

Hi @alx

 

The .reversed() function doesn't have call backs https://gsap.com/docs/v3/GSAP/Timeline/reversed()/, but the .tweenTo() does and because we can be sure that the link is visible when the timeline has played there will be no need to check where the animation is an play it in any direction, we can play the playhead to zero and then watch for an onComplete to turn the background red. https://gsap.com/docs/v3/GSAP/Timeline/tweenTo()

 

Hope it helps and happy tweening! 

 

See the Pen wvNwrWL?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[alx]

Yeah mvaneijgen.....that helped! That was it! Next time, instead of spending 2 days trying to fix it myself, I'll just post on the forum😆. I really appreciate the fix and explanation. Here's how I applied it (the last section of code) to the actual project...

$("#menu-main-menu a").click(function(event){	
	event.preventDefault();
	let destination = $(this).attr("href");	
	tl.tweenTo(0, {
		onComplete: () => {
		  window.location = destination;
		}
  	})
});	

So now the browser successfully waits for the reversed menu animation to finish, and then refreshes the window with the new page. Thanks again!!!

[mvaneijgen]

 

26 minutes ago, alx said:

I'll just post on the forum😆

Or search the docs, there is so much useful info on there that even if you don't find what you're looking for it will help you in the future! https://gsap.com/docs/v3/

 

Glad it helped, happy tweening!