27th January 2017
Some People Think I’m Bezier, but I Just Think I’m Tweened
I love animation, some would say I’m Bonkers about it (see what I did there? No? That's okay, Dizzee Rascal gets it). In the days when Flash was the go-to tool for web animation I was all over it - Drawing up silly faces and making them blink, making a little square ‘walk’ across the canvas (look out Disney, here I come!). Heck, I even built my first portfolio website where pretty much everything in it moved. Those were the days.
A brief history of animation on the web
Animation, in the traditional sense, has been around for a long time, and has always been a great, alternative way of communicating narratives and ideas. When it comes to the web, animation didn’t make a somewhat stable appearance until 1993 when the tag was adopted by browsers and allowed the use of the .gif image format (created not long before that in 1987). Gifs allowed web experts to convey actions, and reactions, on their website without using a great deal of bandwidth (back then bandwidth was incredibly limited and a small image in today’s context could take tens of seconds to load). A classic gif welcomed by the internet with open arms from the outset was the Peanut Butter Jelly Time Banana.
In 1995, JavaScript cropped up and gave developers a tool to ‘enhance’ the user’s experience. This included the ability to animate elements but with a potentially hefty performance cost. Shortly after, in 1996, Flash arrived and bulldozed all concepts of what was possible on the web, as up until that point CSS didn’t exist (as such) and websites used tables for layout. This put the freedom in designers’ and developers’ hands to create weird and wonderful layouts complete with intricate animations. The web had never been so visually dynamic…It had also never taken so long to load a single page!
CSS animation technically landed in 2008 with CSS transitions allowing simple state changing interactions such as colour, position and opacity. Just after keyframe animation came in 2009, with limited support, but provided more control over how elements we animated. Both dangled the carrot of accessible, easy to implement web animation. At the time, CSS3 animation was rare to see out in the wild as its syntax was still up in the air and it was relatively difficult to implement consistently. Fast forward a few years to 2016 and you will struggle to see a website without some form of animation on it.
How does CSS animation work now?
Let’s step out of the DeLorean and get back into now. CSS transitions and animation are much easier to implement and usage is documented in great detail across the internet. For example, if you want to fade a call to action in on hover using CSS transitions you would do something like this:
.cta {
opacity: .6;
transition: opacity 0.5s ease-in-out;
See the codepen for this here – http://codepen.io/Monkeybruiser/pen/jrBmgY If the call to action requires a little more ‘umf’, a keyframe animation might be more appropriate. To make the call to action ‘bounce’, we’d set up a keyframe action containing the steps of the animation and then assign the action to the element along with some finesse attributes:@keyframes ctaPulse {
How can animation be used?When you hear ‘animation’ it’s easy to think of Disney and Pixar levels of complexity, I know I do, and combining that with ‘web’ can send shivers down your spine. That’s not really what it’s all about or at least it doesn’t have to be.There’s a well used saying: “Good design is obvious. Great design is transparent”. The same thing goes for animation. When used well (in the context of a website) the user shouldn’t really notice an element is animated, it should just make their experience much more fluid and enjoyable. And it’s not just when and where to use animation on the web, you also need to consider HOW to use it. Is there high importance to the element you’re animating so it needs to jump in quickly? Is there less importance but an action needs to be completed so a subtle, repeating bounce is more appropriate?
As part of our recent Cargo website refresh and code refactor, we had the chance to explore CSS animation in a little more detail and experiment with some of the more exaggerated animation practices. We started with some svg animation throughout the site to get things moving and came up with the animated boat v1.
We have a little bit of movement but it wasn’t great and the motions were very linear. Step in animation-timing-function to give the elements a little bit of personality (See ‘The Illusion of Life‘) and we ended up with the animated boat v2.
Not a bad start! Next up we wanted to add a little bit of not-so-subtle playfulness to the footer call to action area and added this little bouncy box guy.
This sort of animation is all well and good for experimentation but should be used sparingly unless, of course, it’s inline with your brand and makes sense in the context of your content.
Conclusion
CSS has a wide array of animation properties available to dive into and experiment with. Each one shapes the animation and gives it a different feel, which is an important consideration depending on the goals of the website. A website predominantly used by children could utilise a much more exaggerated element animation style compared to, say, a care home website. A recent ShopTalkShow episode talks about CSS animation and how a slight tweak to the timing function can completely change an animations feel.
The faster something moves the more urgency it promotes to the user. Do you want a background notification to spring into view even if there is no interaction required to dismiss it? Likewise, an error message crawling across the page over 4 seconds would be infuriating when there’s a vital action to be completed. Animation is fun and a great way to add subtle action to your website as long as it’s fit for purpose and matches the tone of your website.
Sources
A brief history of web design for designers
The Evolution of the Web
The History of GIFs
