We relished the challenge of incorporating a travelling tea van: the ‘Little Urn’ into their new site. An animation that, after much deliberation, we called a "trundle". The key part of this was the rotation of the wheels and how they link up with the distance the van moves. Without this all realism is lost, your eyes can't help but notice if it’s even slightly off.
On the Yorkshire tea site you can see it drive by as your scroll the homepage. It’s fun, the client loved it, and I think it’s all down to the cheeky wheel spin before he shoots off the screen. Triggering it on the site by a scroll event also gives it a bit of a special feel, an interaction which means that it's not just continually looping endlessly.
MOJO came to us last year asking for something special to mark Halloween on their site. It would have been easy to suggest changing the colour scheme to black and (pumpkin) orange, we had bigger ideas.
With a goal of not wanting to creep anyone out too much – We have more than one person in the office that is quite petrified of spiders after all! A spider crawling across their homepage was the only way to go, honest!
It’s the first time (and probably also the last) that I’ve had to detach the legs from a spider (illustration) so that they could be seperately animated to create the creeping effect, alongside a wiggle of the body.
While the legs are CSS only animations, we had to use TweenMax to move the spider along the path he takes across the page.
Beefeater Bar + Block
No one in the world enjoys watching a loader bar go from 0% to 100% but we've tried to change that with Beefeater Bar + Block. In this slick animation (consisting of 70 individual frames) you get the chance to learn all those tasty cuts, which will hopefully get users’ mouths watering before the content loads in.
Again, we used TweenMax for enhanced performance as well as giving more control over the timings.
When we made our own beer we decided that we wanted to animate the bottle when it came to the accompanying website! So we got photos of the bottle from all angles and with a bit of JS stitched them together so that the mouse can glide over it to initiate a spin! Although the site is no longer live you can still find the bottle animation in the header of the #Beer case study.
Keep tabs on us
For the curious amongst you, we’ll be trying to share examples of our animations on CodePen (Adam, Jamie, Simon & Will) as well as on dribbble & Instagram. If you've any questions then why not send us a tweet?