To create 4 HTML5 banners that featured Stanley (the Vitality dog) walking across the screen with campaign messaging.
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!