Over the last few months, the Superdream development team have been working on an exciting (but yet to be unveiled) animated web project. As we scoped the project requirement we came across a number of challenges including compatibility and resource usage. The research we undertook whilst considering how to approach the site animation led us to Greensock (AKA GSAP), a Javascript animation platform built for performance and compatibility. This provided us with cross-browser solutions for browsers that do not fully support CSS3 animations.
Watch the short 90-second video below for a quick insight into the platform.
(youtube: https://www.youtube.com/watch?v=-riXBjDfvOw)
GSAP Tutorial
The tutorial we’ve created below takes a closer look at one of GSAPs basic animation functions and gives you an idea of the platform’s simplicity and power. Within this tutorial we will animate an existing static scene built with a few images and basic CSS. See the final scene that we will create below. Before you get started (link: https://labs.superdream.co.uk/tutorials/gsap-balloon/SD-balloon-assets.zip text: Download the Tutorial Assets here.)
(link: https://labs.superdream.co.uk/tutorials/gsap-balloon/SD-balloon-assets.zip text: )
### **1. Add the GSAP Library to your page **
Before we can create some Greensock animation we first need add the GSAP library to our code. Add the Following code to your HTML underneath the closing title tag:
(In this tutorial we will use GSAP’s hosted library but you can download and host the assets directly which is available for download on their website)
### **2. Initiate GSAP on page load**
Add the following Code to initiate the GSAP library and target your animation web element. Add this script just above the closing tag.
### **3. Configure your animation**
We now need to set some animation properties to make the hot air balloon move. Lets add the following parameters to your previous script so that it now looks like the below, and view the updated HTML file in your browser.
Hopefully, you will now see the balloon subtly move and then stop. However, we want the balloon to repeat this movement to give the feeling that is floating. To do this we can instruct GSAP to do this by adding a couple of more parameters.
Yoyo instructs the element to reverse the animation once it has completed.
The repeat allows you to define how many times the animation is played so 3 would loop the animation three times and then stop. If -1 is set this tells GSAP that the repeat is infinite.
Ease controls the flow and speed of the animation. While this parameter is not essential to bring your creations to life it allows you to easily improve how the end result looks. We are using this parameter as without it the animation looks a little hard when it repeats and the ease blends the repeat nicely. Your Final Javascript code should now look like this:
Reload your HTML page and you should now see your hovering balloon.
### **4. Animate the full scene**
To add a bit more life to our scene you can animate the scene by adding the following code into your script.
Refresh your page and your scene should now side scroll as if the balloon is hovering across a forest.