Jump to content
GreenSock

Hysteresis

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

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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";
	};
Link to comment
Share on other sites

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

 

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Good idea, awesome thank you. That worked perfectly!

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