Fade Out & In Between Pages
This tutorial is going to teach you how to fade out and in between pages using jQuery and TweenMax. It's actually pretty easy to do and can create some really cool effects. Don't believe me? Check this out:
You can point to any page using this method, as long as it's on the same domain.
Pretty cool, right? Here's how it works…
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
The fancy_nav function is what you'll call from your links. You'll pass it two variables that should be fairly self-explanatory, the new URL and new title that you want to appear to the visitor. Note that the URL doesn't actually have to exist – but it does have to be somewhere on the same domain – and the title can be different from the actual title of the page that you're moving the visitor to.
Line 3 just loads up TimelineLite, part of the Greensock Animation Platform, that makes animating your page super easy. The callback part tells it to call the change_content function when the animation is done.
We set global variables in lines 5 and 6 so that the callback function can access them.
It's lines 8 and 19 that do the actual animating. That's saying to make the opacity of the page body go to 0% over the span of a second, and then (on line 19) to go back to 100%, again over the span of 1 second. We're specifying the whole page body here, but you can just as easily specify just a single div. For an example of that, check out our web design section of this site and click around between the pages.
The history.pushState line is what changes the URL. It takes 3 parameters: a state object, title, and URL. We don't use the state object here, so just leave it null. And, input your title and URL for the new page in spots 2 and 3.
Finally, we have the change_content function. Changing the URL doesn't change the page's content itself, so we still have to do that. There are plenty of ways to get your new content but, for the sake of simplicity, we're just reaching out to the new URL via jQuery's Ajax function and grabbing the content from there. Using the .done feature, we tell it to wait until content has been grabbed before continuing.
Again, for SEO and page load time reasons, all of this really should be included in a separate .js file. We've just included it on the page here to make the example easier.
<p><strong><a href="#" onclick="fancy_nav('https://inkplant.com/code/fade-out?example=1','Example 1');return false;">Example 1 »</a></strong></p>
That's basically all there is to it. On it's own, this might not seem all that impressive, but starting here you can easily make some really cool transitions between your pages. If you do, let us know in the comments below, we'd love to check out your work.