Creating HTML5 Display Ads using Greensock Platform
Marketers look for innovative ways to tell the story or communicate with the prospects on digital marketing channels. Display Advertising is one such channel that has witnessed innovation in both serving technology and creative technology. After the arrival of HTML5 back in 2008, the constant improvements and innovations led to a lot of robust javascript animation libraries that today help developers create compelling HTML5 animated ads.
There are dozens of popular javascript libraries that are used today to create UI animation or HTML5 animated ads, a few of them are Anime.js, Howler.js, KUTE.js, Three.js and Greensock. So which one is best? It definitely depends on the use case but if as an animator I have to pick one, I will pick Greensock.
Greensock is a ‘Javascript animation platform’ that consists of various plugins that create a robust UI animation experience with just a few lines of code. Its constant up-gradation, speed, support, and zero dependencies make this library a very reliable tool for developers.
In this article, we will understand the anatomy of an HTML5 ad using Greensock Animation.
Installation & HTML
Just like any other web application, HTML is the building block of HTML5 ads too. You are supposed to include the GSAP library CDN link or source file using the <script> tag. You can put it inside <body> or <head>.
This is the core of GSAP and all other features or plugins will require an additional reference.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="ad.size" content="width=300,height=250">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<title>Document</title>
</head>
<body>
</body>
</html>
Below is code refering to Draw SVG plugin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="ad.size" content="width=300,height=250">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="DrawSVGPlugin.min.js"></script>
<title>Document</title>
</head>
<body>
</body>
</html>
To use the club plugins or the super power of Greensock, you will have to take one of the paid subscriptions available on Greensock website.
CSS
CSS is another essential part of any web application as CSS is used to add styling to the basic structure of HTML. When we animate elements, the role of CSS becomes critical as we define default positions and the state of those elements using CSS. We can define CSS for the display ad as internal CSS and we can also define CSS outside and refer to the CSS file inside HTML.
One most important thing to remember is to mention position: relative and overflow : hidden for the main container div of the Ad and then position as absolute for child divs.
#container{
margin:0px;
position:relative;
width:300px; height:250px;
overflow: hidden;
background-color: #0062af;
border: #0062af 1px solid;
}
Javascript
Javascript is the real playground for Greensock, depending on the kind of animation, we need to use a certain syntax for Greenock Javascript code. We can write the whole JS code inside the <script> tag and also in an external JS file. in case of small animation projects with 10-15 lines of code, it’s better to not create an additional file but write the whole code in the script tag.
In general we can start with gsap.to() method for basic animation.
gsap.to() requires two things to execute animation, Targets, and Vars, target is the object/element you wish to animate, you can pick them using class or id selectors. Vars are properties or value pairs you wish to set in terms of animation. For Example:
gsap.to("#logo", {duration: 1, x: 100});
Here #logo is the target and duration and X are Vars, this piece code will move the file with id #logo for 1 second on x-axis to position 100px, which is similar to the translate property of CSS.
Lets take another example
See the Pen gsap.to() Basic Usage by GreenSock (@GreenSock) on CodePen.
In the example above, the animation is taking place on 3 different elements, “.box”, “h2.title” and “.green”, as box class is applied to all the shapes so selecting .box class in gsap.to() will affect all the boxes. Here green box performs a little differently as rotation and scale properties are applied specifically to the green box only.
Timeline & Sequencing
The timeline feature of Greensock makes it really easy to sequence your animation when you plan to animate multiple elements one after another, below is an example that shows how timeline helps in sequencing:
See the Pen Timeline: Basic Sequence – GSAP 3 by GreenSock (@GreenSock) on CodePen.
gsap.timeline() is the method that helps in adding timeline to the animation, the above example first stores the functioning of the method in a variable ‘t1’. Then to connect all the tweens, you just need to use t1.to() rather than gsap.to().
