Jump to content
Search Community

GSAP & popState

Giannis 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

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});


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

		var animationInTl = new TimelineLite();
	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

Link to comment
Share on other sites

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.




  • Like 3
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...