G4S: "How it Works" Animation
Cross-device HTML5 story-style animation
I worked with Skylark Creative (opens new window) to build a cross-device story-style animation in HTML5, to show how G4S’s cash collection service represents good value for money for the small business.
The story illustrates the journey of a cash bundle, from the customer’s till, then safe-and-secure to the G4S depot, and finally the digital step to their bank account.
“Look Ma, no Flash!”
Along with this, I developed a fairly robust visual GSAP Controller element, which can be included in any GSAP animation just by including the script on the page.
The final animation took much longer to set up that I could have imagined before tackling this kind of project, unfortunately, ultimately taking weeks not days. A lot of time was spent getting to know the GSAP framework, along with some (though very few!) of its idiosyncrasies, and leveraging the power within. however, once the overall code structure and numerous refactorings (7 at the last count) had taken place, things really started to flow!
Around the physical animation was structured the rest of the functionality, including the navigational elements, informational elements, and popovers, all responsive, of course.
The final animation: