Jump to content
Search Community

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

Hysteresis test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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

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.

  • Like 1
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.
×
×
  • Create New...