Vitality Invest

HTML5 Banners


vitality health logo

The Brief:

To create a suite 12 HTML5 banners that featured Stanley (the Vitality mascot) walking across the ad with campaign messaging.

What I Produced:

To create the walk cycle limited assets were available. Originally, I hand animated the dog's walk cycle using traditional 2D techniques to create a 'line test'. Then working from a single static photograph – we constructed 8 key poses for the dog’s walk cycle in Photoshop. Watching video footage of a similar dog walking, I was able to match the keyframe positions and shade in shadows and textures using a Wacom Cintiq tablet. Once the movement was refined to a good level in Photoshop, we created sprite sheets that were subsequently used with a CSS 'keyframe step animation' to create to illusion of movement.

The end result was a believable walk cycle – produced from a single photograph! With a file size under 21kb!

Update: I have recently updated this animation using a PNG image sequence from a 3D render of Stanley walking. The CSS Keyframe technique is still powering the motion.

The messaging and additional animation was hand-coded using GSAP.