Animation With Greensock GSAP Tutorial
With the advent of javascript came the idea of web animations. Initially, this was done with animated GIF images, and later javascript gave provided the ability to move DOM objects within a page. But, people wanted more, and so was borne Flash. It was clunky, flugly and poorly supported, and finally, Steve Jobs put the final nail in the coffin of Flash in declaring that apple would never support it.
A few animation libraries began to emerge, and JQuery was quick to pick up on this with their animate() function which allowed primative animations of elements. But people wanted more.
Animation specific javascript libraries began to appear and, among them, Greensock (GSAP). Whilst the others came and went, GSAP developed and grew more stable and robust until, at the time of this writing, is the GOTO toolkit for Web Animations.
This tutorial, and others which follow, take the user from complete nonce, to facing down Pixar.
- Abstract
- Tweens
- Tween Multiple Objects Simultaneously
- Fetching Data
- Filtering Data
- Indexing Data
- Is PostgreSQL Better Than MongoDb
Abstract.
For the purpose of this tutorial, the directory structure will look like this
js/main.js
css/style.css
images/train.gif
Tweens
So, what is a Tween?
A Tween is an abbreviation for in-beTween. A Tween decribes Tween, n animation, are the frames that depict an objects' movement between key frames.
A Tween manages the shift a property value of an DOM object, to another property value.
An example might be to adjust the "left" property value of a DOM object.
index.php
<html> <head> <!--CDN link for TweenMax--> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script> <link rel="stylesheet" href="/css/style.css"> </head> <body> <div id="container"> <div id="myId">This is not a love song</div> </div> <script src="/js/main.js"></script> </body> </html>
So, what is happening here.
A standard HTML document and in the <head> of the document the TweenMax.min.js file is called from the GSAP CDN.
Next is a link to the stylesheet which will be used throughout this tutorial.
The the document contains a <div> which is the container, and within this <div> is another <div> with the id of myID. The <p;div> with the id if myID will be the target, or focus of the Tween manipulation.
main.js
var tl = new TimelineLite();
tl.to("#myId", 2, {x:500})
In the main.js file, a variable is created to hold an instance of the TimelineLite class which is included in the call to the TweenMax.min.js file from the CDN. Then, the .to method is called to define the manipulation.
The .to method takes three arguements.
So, the call to the .to method says, for the object with the id of #myId, for the duration of two seconds, change the x axis to the value of 500. The default measurement of the manipulation is in pixels, but can be altered to accept other measurements. More on this later.
style.css
#myId{
position: relative;
}
Although the CSS file does not seem to do much, setting the position of an element to relative of absolute, is required to ensure correct behaviour. This will become more apparent later on.
Example
Of course, more manipulations may be carried out in a single Tween. Change the main.js file to add some more effects, such as bounce when the destination is reached, an change the color of the text to red.
main.js
var tl = new TimelineLite();
tl.to("#myId", 5, {x:500, ease:Bounce.easeOut, color:"#ff0000"})
Example 2
But wait a second... Sure, you want do wait, or delay for one second? A delay can be set also which delays the Tween for a given number of seconds. Open the main.js file, and edit, or paste in the following code.
main.js
var tl = new TimelineLite();
tl.to("#myId", 5, {x:500, ease:Bounce.easeOut, color:"#ff0000", delay:1})
Example 3
As demonstrated, multiple properties can be updated with a single Tween. Care needs to be taken when defining properties, as they do not always match with their CSS properties. GSAP uses camelCase for properties which would normally be hyphenated. eg: instead of font-size would become fontSize. background-color would be backgroundColor etc.
To demonstrate this, lets make a few changes to the CSS file.
style.css
#myId{
position: relative;
width:200px;
height: 50px;
background-color:#00ff00;
text-align: center;
border-bottom-style: solid;
border-bottom-color: #ffffff;
}
#container{
width:100%;
border-bottom-style: solid;
border-bottom-color: #ff0000;
}
with the CSS changes in place, the changes to the DOM are more visible. So, the main.js file can be adjusted to look like the following.
main.js
var tl = new TimelineLite();
tl.to("#myId", 5, {
x:500,
ease:Bounce.easeOut,
color:"#ff0000",
delay:1,
borderBottomColor:"#0000ff"
})
Example 4
OK, so quite a bit going on now. The ease is working with a delay of one second, and moves the div along the x axis 500 pixels, whilst the background-color property is adjusted to black and the border-bottom-color is Tweened to blue.
Up to now, only text has been used to manipulate. However, the same animations can be created with images. Lets set up the CSS for the <div> with the ID of myID with a background image.
Abstract.
So far, only a single object has been Tweened, but what if the need is to Tween multiple objects at the same time?
Here the myID <div> is given a background image, and some of the CSS properties changed. When the Tween is activated, the Tween is run on the myId <div> and is chained to the Tween on the container <div>. By adding '-=8' after the vars object, the next Tween is overlapped with the with the previous myID Tween one by eight seconds.
index.php
<html> <head> <!--CDN link for TweenMax--> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script> <link rel="stylesheet" href="/css/style.css"> </head> <body> <div id="container"> <div id="myId">This is not a love song</div> </div> <script src="/js/main.js"></script> </body> </html>
style.css
#myId{
position: relative;
width:208px;
height: 108px;
background-image: url("/images/train.gif");
text-align: center;
}
#container{
width:100%;
background-color:white;
border-bottom-style: solid;
border-bottom-color: #000000;
}
main.js
var tl = new TimelineLite();
tl.to("#myId", 10, {
x:1200,
ease:Sine.easeOut,
delay:1
})
.to("#container", 10, {backgroundColor:"#000000"}, '-=8');
Example 5
Watch as our intrepid steam train rallies off into the night..
Whilst this method works well by manually setting the overlap, they could be synchronised to run at the same time using a position.
Change the main.js file to the below code.
main.js
var tl = new TimelineLite();
tl.to("#myId", 10, {
x: 1600,
ease: Sine.easeOut,
},"sync")
.to("#container", 10, {
backgroundColor: "#000000" },"sync");