We love animation at Toward, who doesn't? It's easy to see why we have such a connection with the medium when much of our earliest experience of mass-media is just that—animation in the form of cartoons. Animation brings things to life, gives personality to otherwise inanimate objects and can even convey emotion or humour in a way that the inert cannot. Furthermore, animation has a function that makes it an invaluable tool for designing effective user experiences. This blog post will look at why we use animation at Toward, with some examples of how animation influences our work and even some code examples to show how we bring websites to life.
A Short History of Web Animation
As anyone who used the Internet in the late 1990s and early 2000s will know, animation has been around since the dark ages of the interwebs. Back in the day, animated gifs and scrolling marquees ruled supreme—they probably had no real functional value but they laid the foundations.
Along came Java and it’s ‘applets’—tiny apps that users would run separate to the main browser windows. Thankfully these were fairly short-lived and didn’t gain a great deal of traction probably due to the questionable user-experience. To the rescue came Flash (and its precursor Shockwave)—creating fully-fledged interactive experiences where the likes of 2Advanced (as shown above) pushed the medium to its limits. It could be argued that these sites weren't often particularly good user experiences and the animations often bordered on the side of ridiculous but again, this was a time of experimentation and serious UX research was in its infancy. Lessons learned.
Next up is DHTML, which describes the manipulation of the DOM (the webpage) via Javascript and CSS. Broadly, this is still how things work today but the term is rarely used anymore. Central to this was jQuery with its easy-to-use animation API bringing animated accordions and carousels to the masses. I would argue that this is the start of web animation becoming useful in a UX sense—animation had become a functional component of web design, not just a great way to display dancing babies on your Geocities page.
Web Animation Today
Nowadays, the advent of HTML5 and (more importantly) CSS3 has made animation even easier and better performing on low-power devices (e.g. mobile). Coupled with a more considered approach to UX, designers are slowly developing a language of animation and interactivity that is shaping the web we enjoy today.
[html5video path="https://content.toward.studio/bluegg/assets/posts/paper-320" w="319" h="566"]
It could be argued that mobile has had a big influence on this. Animation is intrinsic to touch interaction where physical feedback is missing. Animations let you know when you've successfully tapped an icon or reached the end of a page. Although this has always been a feature of interaction design on mouse-driven interfaces, it feels like a lot of the mobile conventions are influencing the web as the boundaries between 'app' and 'web' experiences are becoming blurred. Certainly, a lot of more whimsical animation still exists—the recent trend of parallax scrolling is testament to this and some beautiful experiences have been created as a result. The Facebook Paper app (above) uses animation extensively for its interactions. Here's a great post focusing on these animations by Brian Lovin.
Material Design
Google recently unveiled their new visual language, Material Design, to much fanfare from the design community. And rightly so. All three of the major mobile OS vendors (Apple, Microsoft and Google) have made animation a core component of the design of their mobile UX. All three have spoken in terms of a 'language' of animation design in their OSs but Google have perhaps been the most explicit in their intent.
Google's 'Material Design' language references real world objects, despite its reputation of being lovers of 'flat design'. The same approach is taken for animation and interactions.
Central to the premise of Material Design is that the elements being animated should be treated almost like real world objects—a form of skeumorphism for animation in the flat-design era. I've always been a big fan of this approach and we will see later in this post how we've employed this in our work at Toward.
Animation as Affordance
Great interaction design is all about affordances. This describes employing visual cues to signify that an element is interactive and even hinting at what that interaction might achieve. A good example of this can be seen on a site we recently developed, Vobox. The arrow bouncing at the bottom of the screen not only gets the attention of the user but indicates what they can do (scroll down).
[html5video path="https://content.toward.studio/bluegg/assets/posts/vobox-960" w="960" h="852"]
Recently, we built a touch-screen application for Sport Wales that sits proudly in the reception area of their home in the Sport Wales National Centre in Cardiff. Animation was central to this project as we wanted to create an experience that would delight users whilst creating a sense of time and space. Being a touchscreen interface, the use of affordance was crucial in providing visual cues that something was touchable. As you can see below, we used animation to help differentiate interactive elements from static ones.
[html5video path="https://content.toward.studio/bluegg/assets/posts/sport_wales-960" w="960" h="720"]
Material is the Metaphor
Attention to detail is the foundation of good design. Apple are famous for this and the result can be seen throughout the interfaces they create. From the satisfying (and patented) ‘bounce’ when you reach the end of a page in Safari to the gelatinous nature of the bubbles in messages—these elements have a physicality which makes the interface satisfying and more natural to interact with. Google have also adopted this philosophy with their 'Material Design' principles where "The material is grounded in tactile reality". Although these examples relate to bespoke interfaces created by two of the worlds biggest companies, us humble web folk can play too.
An animation used frequently on websites is that of the 'slide'—typically used to reveal a drawer or navigation pane. Often this will employ an animation like the one below whereby the element slides down to reveal a layer underneath.
[html5video path="https://content.toward.studio/bluegg/assets/posts/mhs1-636" w="318" h="454"]
Although absolutely fine, this animation can be enhanced by giving it a better sense of physical space. The above example is purely two-dimensional and doesn't really make sense in a physical context. By separating the animation in two so that the slide down animation and the appearance of the layer below are distinct, it creates an effect that is more pleasing (we've slowed this down so you can see the effect):
[html5video path="https://content.toward.studio/bluegg/assets/posts/mhs2-636" w="318" h="454"]
Easing
Another often neglected aspect of web animation is that of easing. In the real world, objects don't move from A to B at a linear speed—physics causes them to speed up and slow down according to their mass and weight. Using easing functions allows us to mimic real-life physicality, giving objects what Disney called 'the illusion of life'. This creates experiences that are more natural—bringing elements to life on the screen. An example of this in action can be seen in the mobile navigation of our recently redesigned website.
[html5video path="https://content.toward.studio/bluegg/assets/posts/toward-320" w="318" h="456"]
This animation of the page sliding across to reveal the navigation underneath employs ‘back’ easing to give the movement a feeling of weight, as if the elements themselves have mass as they spring out from the side, overshoot their mark and bounce back again.
In addition to the easing, staggering the animations of the elements helps visually separate them and makes the effect more dynamic. This is easily achieved with canny use of Sass’ loops combined with CSS3 nth-child and the delay parameter of the transition. I’ve created a quick Codepen to demonstrate the effect:
<code>@import "bourbon";
.anim-item {
display: block;
width: 10%;
height: 100%;
transition: all 200ms $ease-out-back;
transform: translateY(100%);
position: absolute;
// iterate over num of elements
@for $i from 1 through 10 {
&:nth-child(#{$i}) {
background: darken(#0091D4, $i * 2%);
// apply delay from index ($i)
transition-delay: $i * 50ms;
left: ($i - 1) * 10%;
}
}
}
.anim {
background: #eee;
list-style: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
&:hover {
.anim-item {
transform: translateY(0);
}
}
&:before {
content: "hover over me";
display: block;
font-family: "jaf-facitweb", "Helvetica Neue", sans-serif;
font-size: 10.1vw;
font-weight: bold;
text-align: center;
color: darken(#eee, 7%);
top: 30%;
position: absolute;
left: 0;
right: 0;
}
}</code>See the Pen jCGKi by hamishtaplin (@hamishtaplin) on CodePen.
Going further, the type of easing employed can be used to subtly evoke different 'feelings' in an animation. For example, heavy usage of exaggerated 'back' or 'bounce' easing is more cartoon-like and 'fun' whereas more linear, mechanical functions such as 'quadratic' have a more utilitarian feel to them. Clever use of this can be used to enhance the type of atmosphere a design is aiming to create, subtly re-enforcing a brand—maybe one day we'll see easing equations specified in brand guidelines? It may have happened already.
Although CSS has its own native timing functions for easing, there’s a ton of resources out there that extend this or even allow you to create your own. In particular, the Sass library Bourbon has a great range of timing functions that we use on a daily basis.
We love animation so much we've used it liberally on our recent website redesign and we think it's really helped enhance our website user experience and our brand. We look forward to seeing how the burgeoning role of animation continues on the web and how mobile and touch continue to influence this. If you have any great examples of web animation, we'd love to hear from you so make sure to Tweet us or even pop in for a coffee to chat about it.
