In this tutorial I will show you how to create simple slideshow using TweenLite.
[button url=”http://bassta.bg/demos/tweenlite-slideshow/” style=”green” size=”large” type=”square” icon=”view” target=”_blank”] VIEW DEMO [/button] [button url=”http://bassta.bg/downloads/tweenlite-slideshow.zip” style=”blue” size=”large” type=”square” icon=”download” target=”_blank”] DOWNLOAD FILES [/button]
A lot of times, what people want on their websites is just simple fade in / fade out slideshow. It is very easy to create one on your own – with a little help of TweenLite and some of it’s less known features.
Let’s start with our markup :
This is the HTML of our slideshow. We have one holder div with id “slideshow” with multiple slides with class name “slide” inside. Let’s style the slideshow it with some CSS:
#slideshow{
position: relative;
width: 900px;
height: 573px;
background-image: url("../img/background_macbook.png");
margin: 200px auto 100px;
}
.slide{
position: absolute;
width: 670px;
height: 420px;
top: 42px;
left: 116px;
overflow: hidden;
}
First, we set the slideshow holder position to relative. We do this, so we can position the slides inside with absolute position. We set the width and height of the slider div, and the background image(for demonstration purpose only). Then, we set absolute position, the width and the height to each slide.
The slideshow all set up. Let’s animate it. We’ll be using TweenLite and CSSPlugin. We can add them separately, but they’re both included in TweenMax, so we can add TweenMax instead.
Now let’s declare some variables
var $slides = $(".slide"); //slides
var currentSlide = 0; //keep track on the current slide
var stayTime = 3; //slide delay time
var slideTime = 1.3; //fade in / fade out time
After this we’ll hide all slides after the first one.
TweenLite.set($slides.filter(":gt(0)"), {autoAlpha:0});
The TweenLite set() method allow us to set properties to object. Everything we can tween, we can set – set() is basically a zero-duration tween. AutoAlpha is a special TweenLite CSSPlugin property – it will tween the alpha (opacity) of a object, and when the tween finish, it will set the visibility to “hidden”. So setting autoAlpha to 0 will both make the object transparent and set it’s visibility to hidden. We’re using jQuery gt() selector to select all slides, after the first one. The line of code would translate “Hey, TweenLite, select all slides except the first one and set their opacity to zero and visibility to ‘hidden’ “.
Next, we have to declare a function that will change our slides and execute it in some interval of time.
function nextSlide(){
//some magic
TweenLite.delayedCall(stayTime, nextSlide);
}
We can use setInterval and anonymous function, but for this example we’re using TweenLite delayedCall function. It takes at least two parameters – first is time ( in seconds ), and second – the function we want to call. We can optionally pass parameters to the function. What delayedCall() does is calling a function after set amount of time , so TweenLite.delayedCall(stayTime, nextSlide) will call nextSlide function after 3 seconds.
Inside the function we will fade out the current slide, found ot the next slide and fade it in.
First, let’s fade out the current slide:
TweenLite.to( $slides.eq(currentSlide), slideTime, {autoAlpha:0} );
We’re selecting the current slide with jQuery eq selector. Then, we tween it to autoAlpha 0 – this is shorthand for tweening the opacity of the element and setting it’s visibility css property. More information about it you can find on CSSPlugin documentation.
What we have to do next is find out which is the next slide. Most people would write something like
if (currentSlide < $slides.length - 1) {
currentSlide++;
}
else {
currentSlide = 0;
}
But there's easier way to to this. It was introduced to me by Carl Schooff and you can find more about it in his post Death To Conditional Statements! Loop Through Elements in an Array with 1 Line of Code.
Here is how we find the next element:
currentSlide = ++currentSlide % $slides.length;
Wow, this is much shorter! The math behind this code is a little bit harder to explain, so if you’re interested check out on Carl video. After we know the next element, we fade it in:
TweenLite.to( $slides.eq(currentSlide), slideTime, {autoAlpha:1} );
To start the slideshow, we just simply call the nextSlide() function after amount of time with TweenLite.delayCall() mathod:
TweenLite.delayedCall(stayTime, nextSlide);
And that is! This is your simple TweenLite slideshow. The complete code looks like this:
$(function(){
var $slides = $(".slide"); //slides
var currentSlide = 0; //keep track on the current slide
var stayTime = 3; //time the slide stays
var slideTime = 1.3; //fade in / fade out time
TweenLite.set($slides.filter(":gt(0)"), {autoAlpha:0}); //we hide all images after the first one
TweenLite.delayedCall(stayTime, nextSlide); //start the slideshow
function nextSlide(){
TweenLite.to( $slides.eq(currentSlide), slideTime, {autoAlpha:0} ); //fade out the old slide
currentSlide = ++currentSlide % $slides.length; //find out which is the next slide
TweenLite.to( $slides.eq(currentSlide), slideTime, {autoAlpha:1} ); //fade in the next slide
TweenLite.delayedCall(stayTime, nextSlide); //wait a couple of seconds before next slide
}
});
Learn more about TweenLite and it’s features on Greensock’s website.
[note]
Credits:
MacBook Pro Retina Psd Mockup by pixeden.
Mooning background pattern by Joel Klein.
[/note]