GSAP & popState

[Giannis]

Greetings to all,

I came across a fade out & in between pages tutorial using pushState (https://inkplant.com/code/fade-out).

The code used is as follows:

 

function fancy_nav(new_url,new_title) {
  
	window.new_url = new_url;
	window.new_title = new_title;

  var animationOutTl = new TimelineLite({onComplete:change_content});

        animationOutTl
            .to....
            .to....;
}

function change_content() {
	source_url = window.new_url;
	$.ajax(source_url).done(function(data) {
		$('body').html(data);
		history.pushState(null, window.new_title, window.new_url);
		document.title = window.new_title;

		var animationInTl = new TimelineLite();
		
        animationInTl
            .to....
            .to....;
	});
	return true;
}

 

What I can't get around, is how to set the popState to reverse the animations (animationOutTl & animationInTl) when the browser back button is clicked.

Any assistance will be greatly appreciated.

 

Thank you for your time

[OSUblake]

You can listen for a popstate event...

 

window.addEventListener("popstate", function(event) {
  // handle change
});

 

But animating page transitions can be a little more complicated than that article lets on. There's a lot of factors involved, and it might be better to use a library designed to handle routing.

 

For really simple routing, you might want to check out smoothstate.js. I've never used it, and it doesn't look like the project has been updated recently, but I remember seeing this thread on how to use it with GSAP.

 

Anything more complicated than that, and you'll probably need to look into using a SPA framework. Here's a really simple routing example using AngularJS.

http://embed.plnkr.co/UOp1ZD/