HTML5 Animated Web Ads

Sample footage here demonstrates a small cross section of projects I was instrumental in developing. These projects were all dynamic HTML5 animated ads of various industry standard sizes for multiple ad delivery networks. Typically the process starts with art direction that’s then handed off with direction for me to develop. Preliminary asset processing procedure needs to be streamlined when working with upwards to hundreds of variant animation, so this is where initial development resources go. Animation timelines are interpreted from provided documents which demonstrate the various scenes that are to be animated.

Once I have all assets produced within a 1:1 specification with artboard/canvas and HTML5 structure in place, then setting up the GSAP timeline animation is next. Javascript functions are then formulated depending on whether the piece loops on a static timeline or if the animation is more interactive.

In the video examples above I highlight 3 distinctive styles of animation, where one is a standard looped timeline, another is a looped staggered “slot machine” animation, and the final is a looping carousel with pausing and navigation.

Specifications for various ad delivery networks will dictate limitations and generally speaking the size of any one ad usually doesn’t exceed 50kb. Image compression techniques for both PNG and JPG formats need to be decided on a case by case situation.

Once each add is completed, it gets encoded into a proofing mechanism for client review.

krisHTML5 Animated Web Ads

Related Posts

Scavenger Hunt Web App

I was responsible for server, site, configuration, assembling and maintaining elements throughout, problem solving technical hurdles and final deployment.

Seventh Mountain Resort Website

The Seventh Mountain site originally was built on a different server and we had to rebuild it from scratch. I migrated existing styles to a modern framework, created season system for changing assets easily, custom post type, and had overall complete oversight in final site brand identity (approximation of original site). I was responsible for

Taste of Albany Microsite

This microsite was for a time sensitive client campaign. As lead developer I worked in an organic/creative fashion with the project producer. We conceptualized an animation effect which was to be controlled as the user scrolls. Alpha channel custom video files were broken into sprite assets and rotated through parallaxed sections which progressively told the

MyDIY Genius Website

This site had several phases to complete before launch. Firstly, the basic framework and engine was to be built using standard theme development practices. The designer provided most of the art direction which guided my creation process. Second there was the matter of developing an import process for all data and supporting images connected to