Unleash TweenMax to build impressive UI animations

Learn how to take control of Canvas and SVG interface animations with the powerful animation library TweenMax


Learn how to take control of Canvas and SVG interface animations with the powerful animation library TweenMax



Animations are now an integral part of the front-end designer’s skillset. Having an understanding of how to create and add animations can really enhance the user experience of a product and makes the interface come alive.

A well-timed shake to show the user has input the wrong values will link with the user’s mental model of a negative shake of the head. Sliding the interface to some new part can be a compelling and satisfying resolution to clicking the interface.

Understanding CSS animation and transitions is crucial to becoming good with these, but sometimes the front-end designer needs a helping hand. They need a consistent way to write animation that works in all instances whether animating DOM elements, Canvas illustrations, SVGs or WebGL 3D objects. In this case you will need to use GSAP’s TweenMax. TweenMax runs 20 times faster than jQuery so no need to worry about performance on devices. Libraries such as jQuery, Zepto, Velocity and Transit can only animate CSS properties, but TweenMax can handle anything. Add to that its ability to sequence and handle browser inconsistencies, then you have a serious contender for the most advanced animation platform that there is. It doesn’t try to interfere with how you structure parts of your frontend, it simply looks after animation alone, making it incredibly useful.

1. Link to TweenMax

The TweenMax library by GSAP can be downloaded from the website ( If you click the Download GSAP button there is an option to link to the CDN version of the library; copy and paste that line into the head section of the index.html file.

<script src=""></script>

2. Link up the style sheet

A lot of the content has already been styled up ready to go. The tutorial will take you through one or two CSS classes that are important in both the design and animation of the project. As before in the head section, just link up to the stylesheet as shown.

<link rel="stylesheet" type="text/css" href="style.css">

3. Define the page

Open the style.css file and style up the body. This sets the background image to cover the entire screen. The font family is set to Helvetica and the overflow of the page is hidden in case any of the elements hang over the bottom of the page as it stops the scrollbar showing.

body {
width: 100%;
height: 100%;
background: url(img/bg.jpg) no-repeat center center fixed;
background-size: cover;
font-family: Helvetica, Arial, sans-serif;
overflow: hidden;

4. First column

The design is being split into two columns, the first column is on the left of the design. The padding is to ensure the inner content to this starts 40 pixels in from the top and left. The logo and menu appear in this column so it doesn’t need to be too wide.

#left {
padding: 40px 0 0 40px;
width: 135px;
float: left;

5. Second column

The next column is the main column that the majority of content will go into, especially if this was a real site. However this will contain several elements that will be animated onto the page so that attention is drawn to them as the page shows.

main {
float: left;
margin: 245px 0 0 150px;

6. Create the logo

At the moment the logo looks lost as it is dark against the dark blue sky. Here, the code styles the outer container that holds the logo. Later in the tutorial, TweenMax will be used to animate this element onto the screen and fade into view.

#logo {
position: relative;
width: 135px;
height: 135px;
background: #eddaeb;

7. Position the logo

Now as there is a light block of colour placed behind the logo, the logo text should be moved downwards slightly so that it can be positioned in the centre of the square on both the horizontal and vertical axis. You can save the CSS file now.

#logo img {
position: relative;
display: block;
margin: 0 auto;
padding-top: 38px;

8. Link up the JavaScript

Back in the index.html page, scroll down to the bottom of the page and insert the link to the main.js file. This file is where all of the TweenMax JavaScript commands will go to power the animation. You can open that file and you will see that it is empty at the moment.

<script src="main.js"></script>

9. Animate the logo

Add the first animation code as shown to animate the logo. The command tells TweenMax to animate from these values given. It animates the logo for one second, fading in the opacity, scaling it up and rotating it from off the screen to the left. It’s given some easing so that it eases back into position.

TweenMax.from("#logo", 1, {
opacity: 0,
rotation: 360,
scale: 0,
left: -200,
ease: Back.easeOut

10. Delay animation

Now we tell gulp about the plugins, directories and files to monitor. Gulp uses a gulpfile.js file in the root folder of our project to configure tasks. Starting with the gulp-jscs plugin, we will tell gulp to watch the src folder for changes and then to run all the files contained through the JSCS tool."#logo", 1, {
borderRadius: "50%",
delay: 0.9

11. Fade the logo in

Instead of the logo being in the square as it moves onto the screen, a fade-in of the logo will happen. This is delayed by 1.2 seconds and takes place over the duration of one second. Save the file and test the animation in your browser to see it working.

TweenMax.from("#logoTxt", 1, {
opacity: 0,
delay: 1.2

12. Powerful staggering

All of the links need to be animated in. It would be good if these could be staggered so that each link comes in one at a time. Fortunately there is a staggerFrom command that is used here. It is applied to any link class on the page. There is a 0.2 second stagger between each element.

TweenMax.staggerFrom(".link", 0.5, {
opacity: 0,
left: -200,
delay: 1.2,
ease: Back.easeOut

13. Animate the text

There is a large zero on the page, this element is going to be targeted so that it can have its text value increased and animated. This will allow the text to whizz up through the number of coffees drank. The first step in this is to set some variables.

var myText = document.getElementById('lgNum'),
endVal = 2372,
currVal = 0,
num = {};

14. Get the value

The num object, short for number, that was created in the previous step now has a function attached to it. This allows TweenMax to get the value of the text as an integer, which is a whole number so that there are no decimal places displayed on the page.

num.getTextVal = function () {
return parseInt(currVal, 10);

15. Set the value

Similar to the previous step, another function is added to the num object this time to set the value of the variable and this adds the new text value to the page. The page has to be explicitly updated so that the new value is visible, hence the num object will be tweened.

num.setTextVal = function (val) {
currVal = parseInt(val, 10);
myText.innerHTML = currVal;

16. Initialise zero

The num objects’s setter function is called to set the text value to 0, while it is on the screen it’s the first step that must be done in order for the tween to start moving up through the numbers and the coffee consumption can be displayed on the webpage.


17. Tween that value

After setting up the background work for the num object the tween animation is fed into TweenMax. It’s set to run over three seconds but delayed to only start after one second. SetTextVal is called to tween to the end value., 3, {
setTextVal: endVal,
delay: 1,
ease: Circ.easeInOut

18. Fade in the number

As the number is spinning up, it would be good if this faded in so it wasn’t just sat at 0 for a second. Adding the following tween will do that and move it in from 200 pixels above its current position. The tween for the fade-in lasts just less than a second.

TweenMax.from("#lgNum", 0.8, {
opacity: 0,
top: -200,
delay: 1

19. Fade in the text

Below the number is some text and this code sets that to tween in just after the number is on the screen. It will fade in from below and move upwards into place on the screen. Save the page and reload the browser to watch the effect of the different elements animating.

TweenMax.from("#mainStrap", 0.8, {
opacity: 0,
bottom: -200,
delay: 1.8,
ease: Cubic.easeInOut

20. Stagger around

At the bottom of the page are three panels and as in Step 12, they can be staggered in so that each one animates in turn. Here the panel class is located and each of those is animated in from the right, with a slight spin into place. The animation starts after two seconds and each is given a half-second pause between animating.

TweenMax.staggerFrom(".panel", 0.8, {
opacity: 0,
rotation: 45,
left: 100,
delay: 2,
ease: Back.easeOut

21. Drop in the numbers

In the panels there are numbers and those are now going to be dropped in one at a time so that they appear inside the panels. Again this is a stagger animation. Save the page for the final time and refresh the browser to see all user interface elements now animating into place.

TweenMax.staggerFrom(".mdNum", 0.8, {
opacity: 0,
top: -100,
delay: 2.8,
ease: Back.easeOut