Jump to content


Page transition animations

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 very new to GreenSocks and am still in research mode so exuse me if this question is trivial. I am looking for a library that would allow me to create something like http://tympanus.net/Development/PageTransitions/


The only difference is I have actual urls that I want to transition to. The example above doesn't work b/c the all the content is on one page. Is there a way to do something similar with Green Sock? If so could someone point me in the direction of documentation and examples. I have looked around but not sure where to start. Thanks for your help.



Link to comment
Share on other sites

hello and welcome to the forums


GSAP can handle transitions and animation, very well. whether its animating css or attributes or whatever..


As far as your link above, that type of page transitions, which are just basically animating to different div's positioned on the page.


Regarding transitioning to urls.. this would be done using Ajax, to pull the content form that url into a div, and then transitioning that urls content in.


or using HTML5's history.pushState:

// this method takes (state object,page title, url)
history.pushState({},"URL Page Title","URL-GOES-HERE");

but it depends if your browser supports it.




Basically GSAP would handle the transitioning and animation, and either Ajax or HTML5's history.pushState would handle and  bring in the page without having to reload a different url. Which you would then animate in and out as needed with GSAP.


checkout these examples how GSAP handles animating:










  • Like 2
Link to comment
Share on other sites



Another great example are this slides by John Polacek:




Is not exactly the same thing as tympanus but is very cool indeed, you can check the source code in John's git repository:




This is a live and complex example that, as Jonathan already stated, GSAP can handle all of that and even more. For example in John's slides the text animations are created with lettering.js but you could achieve those same effects with the engine's splitText tool and even animate the letters, words, lines or even combinations with any css property the CSS plugin can handle.




  • Like 2
Link to comment
Share on other sites

Regarding transitioning to urls.. this would be done using Ajax, to pull the content form that url into a div, and then transitioning that urls content in.


If we were to go this route how would you change out metta tags? I am inquiring about this from an SEO standpoint. For example example if you paste http://www.greensock.com/jump-start-js/#basic-tween into google it returns http://www.greensock.com/jump-start-js. The book mark doesn't get indexed. How can I have a site that transitions from page to page that provides SEO value.

Link to comment
Share on other sites

it depends how you have your site setup.

- are your URL's only html (static pages) or php pages (dynamic pages) ?

- was your site setup first so that without ajax or pushState, you could navigate to those pages, even without javascript?

when Google crawls your page it doesn't run JavaScript, so if the links are pointing to an actual page, that already has that different page title, meta tag, and content.. than it will crawl that page just fine since its just a page.

using ajax just intercepts the default action of the link and forces either the whole page or a fragment of that page to be loaded in without a page refresh. .. or unless your using hash tags to navigate from the url

so really it depends if the pages are actual html pages on the server.. or if your dynamically creating the page with php. If your dynamically creating the page with php.. then you have do some extra work to detect if a link was clicked from a user which triggered the JavaScript ajax.. or if the link was followed through, from a web crawler like the google bot.. which would involve a check server side.

Google bots don't crawl AJAX content, but Google proposed a scheme to crawl AJAX content. A good article from Google describing this practice using the hash (#) in your URL, is explained in this following link on Google developer docs :


Google recommends using the hash so its crawler knows its an Ajax URL.


hope this helps..

Link to comment
Share on other sites



If you're using google analytics you could check this link:




Basically all the magic happens in the _gac.push() function, you can add that to your ajax call and that should do the trick.


Although I wouldn't recommend using the # in your urls for the ajax call, better use the normal url (which also is more SEO friendly) and on the success call  find the content with that particular id and attach that to your container, that could also give you the chance to check if you have any images in it and use the same referred object to preload your images and later show them.




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.