HTML5 Banner Framework

 

Due to the complexity of the business needs and the amount of different product types that Flight Centre has to offer one banner set wouldn’t do. I looked at one years worth of previous Gif’s and other media that Flight Centre had used. This helped me determine about 90 percent of use cases to build a HTML5 banner framework.

I started with the design process to map out each banner set and all possible combinations. Asked many questions to the Digital Team about use cases and started to define character limits and brand styling. I needed to build out each frame independently from each other and each frame needed to be able to be played in and in-out. This is so the animate in frame could be the end frame and the in-out will be in between frames. I used nested animation function calls and then set up basic logic to play different frame orders.

The base frames are Standard Frame, Save Frame, Bonus Line Frame, Tick Frame, Hero Lockup Frame, Extra Text Frame. All of these frames can be played in any order and end on any frame. As each frame is modular and independent based on HTML, CSS and Javascript unused frames are then deleted bringing file sizes down and nothing breaks.

This is very powerful and fast and enabled me to produce hundreds of banners each week. This helped me get my head around this type of problem and has been a great learning experience. Planning this out properly was the key to the success of it. I spent a lot of time CSS mapping, logic planning, animation planning and creating a modular animation library.

So far there are three styles of sets, white circle, red, worldwide diagonal sets. Hot deals is coming soon. 

Without the use of GSAP to control animations and having the ability to set up conditional logic and precise timeline control with nested animation functions, this type of system is simply not possible.

Click on each blue button below to view a full HTML5 GSAP responsive animated display banner preview page.

 


Below is a screencast of the Nine MSN Honey Digital Takeover showcasing my work using HTML5 GSAP animation and modern web programming.