Creating Animated HTML5 Banner for Google Adwords with Using GSAP

A while ago, Google provided advertisers with opportunity to place HTML banners in its Adwords network. Despite the rather serious technical limitations and requirements, such banners look much more attractive than classic GIF banners.

Here, you can see a banner I created for demonstration (you can’t see it with AdBlock).

The weight of HTML5 banners is their main limitation: the developer must fit all the resources into an archive file with a maximum size of 150Kb. In addition to the .htm document, it may include images, styles and JSs as well.

However, there is good news here: you can connect Google Fonts and JS-libraries hosted on Google servers to the document, and these resources will not be counted in the size of the archive file. You can connect old faithful jQuery, but libraries for animations, such as Greensock (GSAP) and CreateJS, are the most interesting here. You can find links to the libraries here.

The HTML5 banners popularity is gradually growing every day. Very similar banners can be made not only for other advertising platforms. Currently, many masters create such banners in visual editors; however, visual editors do not always allow to fit the 150Kb limit and implement all the visual effects designed.

Read more

Comment the post