[GSAP & popState]

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