CSS animations: Bringing websites to life
Roughly a 3 minute read by Jamie Wright
Everyone knows that GIFs are great, but they can have very large file sizes meaning longer loads times and a poorer user experience. So, how do you create animations that are both complex and efficient? Well here we favour a combination of CSS animations and JavaScript (usually GSAP) to get the job done and today I’m going to take a look at some live animation examples from some recent projects so you can see how they came together.
Yorkshire Tea
See the Pen Little Urn -- no drive by Jamie Wright (@iamjamie) on CodePen.
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 Bar
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
See the Pen Animated Cow by Simon Willans (@willans) on CodePen.
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.
#Beer
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!
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?