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:

• Jump Start: GSAP JS by Greensock
• Sequence JavaScript Animations Like a Pro by Greensock
• Greensock JavaScript Animation by Jens Ahrengot