How can I add onComplete to tl.reverse()?

[Hysteresis 2 Likes (Newbie)]

I am trying to write a function that plays an animation when a link is clicked and then opens the link... so that I can play transitional animations between pages...
 
This is my code, but I can't get the page to load after the animation:

var tweenBtn = document.getElementById("one");

tweenBtn.onclick = function(event) {
event.preventDefault();
tl.reverse(2.2);
window.location.href = "POWERservices.html";
};

 

Is there a way I can add onComplete to my timeline that has just played in reverse?

 

Or is there a better way of doing this?

[Rodrigo 5,408 Likes (Superhero)]

Hi,

 

Try the onReverseComplete event:

 

http://api.greensock.com/js/com/greensock/TimelineLite.html

var tl = new TimelineLite({onReverseComplete:reverseFunction});

function reverseFunction()
{
  //code here
}

You also have onReverseCompleteParams and onReverseCompleteScope, the usual suspects of GSAP callback events

 

Rodrigo.

[Hysteresis 2 Likes (Newbie)]

Ok thank you!

 

What if I have multiple buttons that I want to have play the same timeline in reverse before leaving the page?

 

Like this:

var masterTimeline = new TimelineMax({repeat:-1, repeatDelay:120}); 
    masterTimeline
	.to(".home-container", 0, {autoAlpha: 1, delay: 1}, 0)
    .from(".home-container #one", .7, {scale: 0, x: -4000, rotation:"-120deg"}, .25)
    .from(".home-container #two", .7, {scale: 0, x: 4000, rotation:"120deg"}, .2)
    .from(".home-container #three", .7, {scale: 0, x: -4000, rotation:"-120deg"}, .1)
    .from(".home-container #four", .7, {scale: 0, x: 4000, rotation:"120deg"}, .3)
    .from(".home-container #logo", 1, {scale: 0, rotation:"360deg", ease:Elastic.easeOut}, 1.2)
	.staggerFrom(".home-container #one p, .home-container #three p", .5, {scale: 0, autoAlpha: 0, x: -200}, 0.25)
	.staggerFrom(".home-container #two p, .home-container #four p", .5, {scale: 0, autoAlpha: 0,  x: 200}, 0.25)
	.staggerTo(".home-container #one p, .home-container #three p", .3, {scale: 0, autoAlpha: 0, x: -200}, 0.25, 6)
	.staggerTo(".home-container #two p, .home-container #four p", .3, {scale: 0, autoAlpha: 0, x: 200}, 0.25, 6);
	

	var tweenBtn1 = document.getElementById("one")
	 tweenBtn2 = document.getElementById("two")
	 tweenBtn3 = document.getElementById("three")
	 tweenBtn4 = document.getElementById("four");
		
	tweenBtn1.onclick = function(event) {
		event.preventDefault();
		masterTimeline.reverse(2.2);
		window.location.href = "POWERservices.html";
	};
	
		var tweenBtn1 = document.getElementById("two");
		
	tweenBtn2.onclick = function(event) {
		event.preventDefault();
		masterTimeline.reverse(2.2);
		window.location.href = "power360/index.html";
	};
	
		var tweenBtn1 = document.getElementById("three");
		
	tweenBtn3.onclick = function(event) {
		event.preventDefault();
		masterTimeline.reverse(2.2);
		window.location.href = "nexstation.html";
	};
		var tweenBtn1 = document.getElementById("four");
		
	tweenBtn4.onclick = function(event) {
		event.preventDefault();
		masterTimeline.reverse(2.2);
		window.location.href = "quiz.html";
	};

[Hysteresis 2 Likes (Newbie)]

I suspect that I would use this: onReverseCompleteParams:["param1", "param2"]} ??

 

but I don't know how to reference these parameters in my click event...

[Rodrigo 5,408 Likes (Superhero)]

Why don't you create a public variable to store the URL. Use that variable in the argument in the onReverseComplete event handler:

var tl = new TimelineLite({onReverseComplete:reverseFunction}),
    targetURL;

function reverseFunction()
{
  window.location.href = targetURL;
}

tweenBtn.onclick = function(event)
{
  event.preventDefault();

  //assign the target url
  targetURL = "POWERservices.html"

  // reverse the timeline
  masterTimeline.reverse(2.2);
}

Like that when the timeline reverse is completed it'll call that function and go to that specific URL.

 

Rodrigo.

[Hysteresis 2 Likes (Newbie)]

Good idea, awesome thank you. That worked perfectly!