CSS animations: Bringing websites to life

Roughly a 3 minute read from Jamie

08 Jul 2016

CSS animations: Bringing websites to life

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.

See the Pen Spider by Jamie Wright (@iamjamie) on CodePen.

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! 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?

Jamie

Jamie is a Senior UX Developer. He has a keen eye for design, expertise in building responsive emails and gets itchy feet when he doesn’t get his football boots on at least once a week.

Hey there old timer!

Our website uses some new fangled technology which we’re afraid your current web browser doesn’t support.

There’s loads of choice out there nowadays and it’s easy to upgrade. Just click the link below for more information!

Upgrade my browser

I.T. guy wont budge?

No problem! Give us a call on 0113 457 4090, we’re happy to help.