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:

Example 1 »

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…

First, we need to call the JavaScript libraries that we'll be using, jQuery and TweenMax. Ideally this would be done within the <head> section of your page, but we did it here in the body for simplicity's sake.

1.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
2.   <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

Next, write out the JavaScript functions that you'll use. This is the guts of the operation. Ideally, this would be housed in a separate .js file on your server, but we included in the page to keep things simple.

1.   <script type="text/javascript">
2.   function fancy_nav(new_url,new_title) {
3.   	var tl = new TimelineLite({onComplete:change_content});
5.   	window.new_url = new_url;
6.   	window.new_title = new_title;
8.   	tl.to('body', 1, {autoAlpha:0});
9.   }
11.  function change_content() {
12.  	source_url = window.new_url;
13.  	$.ajax(source_url).done(function(data) {
14.  		$('body').html(data);
15.  		history.pushState(null, window.new_title, window.new_url);
16.  		document.title = window.new_title;
18.  		var tl = new TimelineLite();
19.  		tl.to('body', 1, {autoAlpha:1});
20.  	});
21.  	return true;
22.  }</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.

Because many browsers don't respond to the pushState title change request, we follow it up with JavaScript that reliably changes the page title in line 10.

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.

Now that we have the JavaScript defined, it's time to add in the actual link:

1.   <p><strong><a href="#" onclick="fancy_nav('https://inkplant.com/code/fade-out?example=1','Example 1');return false;">Example 1 &raquo;</a></strong></p>

Nothing too fancy going on there. We just point the href to # to make sure the visitor's browser realizes this is a link and styles it as such, then use onclick to call the JavaScript function that we wrote. The return false after the function keeps the browser from actually navigating to #.

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.

Leave a Comment

Name and email are required. Your email will not be published.

This post was published on August 2nd, 2015 by Robert James Reese in the following categories: CSS, HTML, JavaScript, jQuery, and TweenMax. Before using any of the code or other content in this post, you must read and agree to our Terms & Conditions.