Vitality Health

HTML5 Banners


vitality health logo

The Brief:

To create 4 HTML5 banners that featured Stanley (the Vitality dog) walking across the screen with campaign messaging.

What I Produced:

To create the walk cycle limited assets were available. We hand animated the dogs 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 messaging and additional animation was hand-coded using GSAP. The end result was a believable walk cycle – produced from a single photograph! With a filesize under 21kb!