Apple shop navigation recreated using Greensock.

Tutorial: Create Apple navigation using Greensock

May 27, 2013 • Web development12 Replies

Share on Facebook0Tweet about this on Twitter0Share on Google+2Share on LinkedIn1

Apple’s website is always full of small innovative details and fancy CSS3 transitions. Designers talk about the clean and simple interface, while front-end developers wonder how some of these elements were created.

Today we will recreate the new Apple navigation using Greensock. If you look at it in a desktop browser, you will see a nice elastic animation between the two slides and that’s our goal for today.

View Demo Download Files

If you haven’t heard about it, Greensock is a very powerful javascript animation framework which performs 20x faster than jQuery animations. I have been using it for a while now and can recommend it to all front-end web developers looking to spice up their projects with animations.

HTML/CSS

I have used the default HTML5 Boilerplate as a starting point and borrowed most of the html from Apple’s website. Also the CSS is borrowed from Apple.com and was only slightly tweaked to suit this tutorial. It includes box-shadow, transition, gradient, border-radius and other CSS3 properties.

Download the starting files and follow the steps below to see the magic.

jQuery – Greensock

Open main.js from the js folder in a code editor of your choice. This will be the only file we will be working with. Your file should look like this:

$(document).ready(function() {
		
});

1. Setup variables and functions

$(document).ready(function() {
	
	var rightArrow = $('.navbar-arrow.right'),
		leftArrow = $('.navbar-arrow.left');
	
	// Move left and right on click
	$(leftArrow).click(function() {
		animateRight();
	});
	
	$(rightArrow).click(function() {
		animateLeft();
	});
	
	function animateLeft(){
		
	}
	
	function animateRight(){
		
	}
	
});

First declare our variables and setup the functions for our navigation arrows.

2. Animation left

$(document).ready(function() {
	
	var rightArrow = $('.navbar-arrow.right'),
		leftArrow = $('.navbar-arrow.left')
		productList = $('.navbar ul');
	
	// Move left and right on click
	$(leftArrow).click(function() {
		animateRight();
	});
	
	$(rightArrow).click(function() {
		animateLeft();
	});
	
	function animateLeft(){
		var leftAnimation = new TimelineMax();
		leftAnimation
			.to(productList, 0.6, {css:{marginLeft:'-638'}, ease:Power4.easeOut }, 0.02)
			.to(rightArrow, 1, {css:{marginLeft:'1000'}, ease:Quad.easeOut}, 0)
			.to(leftArrow, 1, {css:{marginLeft:'0'}, ease:Quad.easeOut }, 0);		
	}
	
	function animateRight(){
		
	}
	
});

Now lets move the products left when the user clicks the right arrow. We will animate marginLeft of our productList and bring leftArrow into the view while hiding the rightArrow.

3. Animate individual items

As you can see, at the moment we are moving the whole ul. What we want to achieve here is to animate all the products individually and create a nice elastic animation.

$(document).ready(function() {
	
	var rightArrow = $('.navbar-arrow.right'),
		leftArrow = $('.navbar-arrow.left')
		productList = $('.navbar ul');
	
	// Move left and right on click
	$(leftArrow).click(function() {
		animateRight();
	});
	
	$(rightArrow).click(function() {
		animateLeft();
	});
	
	function animateLeft(){
		var leftAnimation = new TimelineMax(),
			products = $($('.navbar li').get());
		leftAnimation
			//.to(productList, 0.6, {css:{marginLeft:'-638'}, ease:Power4.easeOut }, 0.02)
			.staggerTo(products, 0.6, {css:{x:'-638'}, ease:Power4.easeOut }, 0.02)
			.to(rightArrow, 1, {css:{marginLeft:'1000'}, ease:Quad.easeOut}, 0)
			.to(leftArrow, 1, {css:{marginLeft:'0'}, ease:Quad.easeOut }, 0);
		visibleSlide = 'rightSlide';		
	}
	
	function animateRight(){
		
	}
	
});

We did that by getting all the products $('.navbar li').get() and by using the staggerTo method. Now we have all the items animating in a nice sequence, which gives it a much nicer elastic effect.

4. Animation right

We apply the same to our leftArrow, but change the marginLeft and x values.

$(document).ready(function() {
	
	var rightArrow = $('.navbar-arrow.right'),
		leftArrow = $('.navbar-arrow.left')
		productList = $('.navbar ul');
	
	// Move left and right on click
	$(leftArrow).click(function() {
		animateRight();
	});
	
	$(rightArrow).click(function() {
		animateLeft();
	});
	
	function animateLeft(){
		var leftAnimation = new TimelineMax(),
			products = $($('.navbar li').get());
		leftAnimation
			//.to(productList, 0.6, {css:{marginLeft:'-638'}, ease:Power4.easeOut }, 0.02)
			.staggerTo(products, 0.6, {css:{x:'-638'}, ease:Power4.easeOut }, 0.02)
			.to(rightArrow, 1, {css:{marginLeft:'1000'}, ease:Quad.easeOut}, 0)
			.to(leftArrow, 1, {css:{marginLeft:'0'}, ease:Quad.easeOut }, 0);
		visibleSlide = 'rightSlide';		
	}
	
	function animateRight(){
		var rightAnimation = new TimelineMax()
			products = $($('.navbar li').get());
		rightAnimation
			//.to(productList, 0.6, {css:{marginLeft:'0'}, ease:Power4.easeOut }, 0.02)
			.staggerTo(products, 0.6, {css:{x:'0'}, ease:Power4.easeOut}, 0.02)
			.to(rightArrow, 1, {css:{marginLeft:'948'}, ease:Quad.easeOut}, 0)
			.to(leftArrow, 1, {css:{marginLeft:'-70'}, ease:Quad.easeOut}, 0);		
	}
	
});

Lets have a look at what we’ve got at the moment. By the way, well done if you made it this far in this tutorial!

View Now

5. Reverse right animation

Pretty sweet, both arrows are magically moving our navigation items left and right, but something is not exactly right with our animateRight.

The products look like they are pushed away when you click on the left arrow. That’s not our intention.

We need to change the order of the products in order to achieve the desired elastic effect.

$(document).ready(function() {
	
	var rightArrow = $('.navbar-arrow.right'),
		leftArrow = $('.navbar-arrow.left')
		productList = $('.navbar ul');
	
	// Move left and right on click
	$(leftArrow).click(function() {
		animateRight();
	});
	
	$(rightArrow).click(function() {
		animateLeft();
	});
	
	function animateLeft(){
		var leftAnimation = new TimelineMax(),
			products = $($('.navbar li').get());
		leftAnimation
			//.to(productList, 0.6, {css:{marginLeft:'-638'}, ease:Power4.easeOut }, 0.02)
			.staggerTo(products, 0.6, {css:{x:'-638'}, ease:Power4.easeOut }, 0.02)
			.to(rightArrow, 1, {css:{marginLeft:'1000'}, ease:Quad.easeOut}, 0)
			.to(leftArrow, 1, {css:{marginLeft:'0'}, ease:Quad.easeOut }, 0);
		visibleSlide = 'rightSlide';		
	}
	
	function animateRight(){
		var rightAnimation = new TimelineMax()
			products = $($('.navbar li').get().reverse());
		rightAnimation
			//.to(productList, 0.6, {css:{marginLeft:'0'}, ease:Power4.easeOut }, 0.02)
			.staggerTo(products, 0.6, {css:{x:'0'}, ease:Power4.easeOut}, 0.02)
			.to(rightArrow, 1, {css:{marginLeft:'948'}, ease:Quad.easeOut}, 0)
			.to(leftArrow, 1, {css:{marginLeft:'-70'}, ease:Quad.easeOut}, 0);		
	}
	
});

.reverse() helps us to change the order of the selected items, which is exactly what we needed. Now we have a great looking product navigation with a cool elastic animation.

6. Accessibility and keyboard support

To finish things off I have also included keyboard navigation and accessibility fix for users tabbing through links. Try it using your tab or left and right keyboard arrows.

View Demo Download Files

Conclusion

I hope you enjoyed this tutorial as much as I enjoyed putting it all together. Let me know what you think in the comments below. I am also planning on doing more similar reconstructions in the future so let me know if there is anything you would like me to look into.

Here is also a list of other Greensock tutorials if you would like to explore more functionality and Greensock goodness:

Design and build better websites

Receive practical tips and awesome website deconstructions straight to your inbox. No spam, just the stuff you really want.

12 thoughts on “Tutorial: Create Apple navigation using Greensock

  1. Mike Voermans

    Maybe its Apple’s lack of arrow key support, but when you toggle left/right arrows like crazy, its gets a little out of whack, I assume that’s because mid transition it stops and recalculates. Should it be trying to animate to a defined endpoint instead?

    Fun stuff though.

    Reply
    1. Petr Tichy Post author

      Thanks Mike. You’re right, when you go crazy, crazy things happen.

      I might update the code one day, until then please take it easy with the arrows:D

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>