Web Directions

Conffab

  • Speakers
  • Presentations
  • Conferences
  • Organizers
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
  • Speakers
  • Presentations
  • Conferences
  • Organizers
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
Advanced Search
Searching videos

Animating Web Experiences

John Allsopp at South 2013
  • Details
  • Keypoints

Animation on the Web has a long, though not always esteemed history on the Web. From Animated GIFs, to the blink and marquee tag, and more recently to JavaScript based animation, it’s indisputable that the Web has lagged behind other technologies such as Flash.

But CSS3 changes all that. No longer a ‘won’t it be cool when…’ technology, Web based animation has arrived, and it’s time for you to start taking advantage of it to engage and delight your users. And in this session we’ll see how. We’ll cover CSS Transitions and Animations, and throw some 2D and 3D Transforms into the mix as well, to understand how today’s most common, and eye catching, animated UI design patterns can quickly be implemented in all modern browsers and devices.

Humans love things that move – we have a long history of commercial animation. There are suggestions that the earliest cave paintings were a kind of animation, as they appear to “move” when you move the light source around in the cave.

We’ve had animation on the web for a long time; from the crude early things like blink and marquee. We have some state in CSS; we have plenty of JS animation as well. There have been non-native animation sources as well, most obviously Flash.

Now we have CSS Transitions. This lets us avoid the instantaneous change between states, we can do a smooth transtion instead of a sudden, jarring change. We can specify which property to animate, with what duration and easing.

CSS Transitions respond to both DOM scripting and user changes like resizing the browser window.

However CSS animation can be confusing – not all properties can be animated. Non-length heights can’t be animated (animating from 0 to auto doesn’t work). This is particularly problematic because animating dimensions is a really common thing to do. So you can use max-height instead of height. Instead of height:auto you can set a max-height that is always going to be bigger than the element; then animation will work.

You can also delay animation – really common in slide decks… delay the slide-in effect of nth-child list items.

Transition cushioning/easing can make a massive difference to how credible or believable your animations are. There are aspects of skeuomorphism which are valuable – we’ve got rid of faux stitching, but animation is still about skeuomorphism. We are trying to make people feel something about the animation, so beware the uncanny valley…

Browser support? Most browsers don’t even require the webkit prefix any more. Plus if the browser doesn’t support animation, it’s probably the worst device to be doing expensive polyfills.

Many shortcomings of web animation are alleviated with keyframes – @keyframes allow us to specify multi-step animations, animations that run for multiple iterations; and keyframes can be reused across elements.

Step one: specify animation using @keyframes rule. You give the animation a name; you specify the steps – at minimum the start 0% and end 100%; each step is a lot like a standard CSS statement (percentage instead of selector; uses brackets for familiar syntax).

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 yellow;
  }
  100% {
    box-shadow: 0 0 12px yellow;
  }
}

Step two: apply the animation to elements using animation properties. By default, animations will only iterate once – then it will revert to the state it had beforehand. So you specify how many iterations. Because animations can be jarring, sometimes you want to alternate the direction so things don’t pulse alarmingly – but keep in mind that it will get an extra “step” by reverting to original state. This is resolved with setting the fill mode – with the value of forwards the final properties persist after an animation (it stops and holds the animation, rather than reverting).

input:focus {
  animation-name: pulse;
  animation-duration: .7s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}  

John’s heuristics for non sucky web development

  • If it can be done in HTML, with no need for CSS or JavaScript, use HTML.
  • If it can be done with HTML+CSS, with no need for JavaScript, don’t use JavaScript.
  • Never use jQuery.

(example with a carousel – “one of the most derided patterns…”)

When calculating animations, you need to work out durations so you can convert to % for keyframes. Remember animations start when the conditions of the selector are met.

Animations are constantly changing the DOM. Each time the left of the element changes, there’s a reflow and repaint.

This is where transforms come in, as they allow us to rotate, scale and translate the element in 2 and 3 dimensions – but without such huge performance hits.

We apply these with the transform property, which takes one or more transform functions as its value. eg. 2D: translateX, translateY.. which work in terms of the top left corner of the element.

You measure this with Timeline → Events. Using transforms reduced John’s example many orders of magnitude.

Scale: numbers from 0-1 reduce the size; numbers 1+ increase. You can change the way things ease in and out by working with transform-origin.

For 3D effects you need to be aware of the perspective – this sets the scene, and essentially works out how far or close the observer seems to be. This is how you do foreshortening effects. Commonly apply this to the <body>.

So is all this animation just a gimmick?

When we move to flat design, 3D allows us to add meaningful depth. That depth can be animated. This helps the user start to imagine a space where your application lives.

(example with iOS effect applied to a stack of iframes – by rotating each one slightly more, you get a fanned look; by transforming the Z axis you can make each look a bit smaller behind the next)

The last thing is the perspective-origin, which sets the viewer’s point of view – where they are viewing the scene from.

[“I’m clearly excited about this stuff…” ← not sure what web stuff John is not excited about? :)]

For a great animation 101: do a bouncing ball. It’s the hello world of animation.

What’s next? Explore, create! Remember animation is the new typography… don’t use Comic Sans!

Don’t use animation as a gimmick. Think about how can create meaningful transitions.

You may also be interested in

Thumbnail for What We Talk About When We Talk About the Web

What We Talk About When We Talk About the Web

John Allsopp

Thumbnail for Getting Off(line): Appcache, LocalStorage for HTML5 Apps that Work Offline

Getting Off(line): Appcache, LocalStorage for HTML5 Apps that Work Offline

John Allsopp

Thumbnail for CSS Architectures Roundtable

CSS Architectures Roundtable

Mandy Michael

Thumbnail for QA with Kenneth Rohde Christiansen

QA with Kenneth Rohde Christiansen

Kenneth Rohde Christiansen

Thumbnail for QA with Marcos Caceres

QA with Marcos Caceres

Marcos Caceres

Thumbnail for QA with Phil Nash

QA with Phil Nash

Phil Nash

Thumbnail for QA with Ana Cidre

QA with Ana Cidre

Ana Cidre

Thumbnail for QA with Eiji Kitamura

QA with Eiji Kitamura

Eiji Kitamura

More presentations from South 2013

    Thumbnail for Making Web Apps as Smooth as Native

    Making Web Apps as Smooth as Native

    Andrew Betts

    Thumbnail for How the Internet of Things Changes How We Design

    How the Internet of Things Changes How We Design

    Alexandra Deschamps-Sonsino

    Thumbnail for I Yield For Generators

    I Yield For Generators

    Adam Ahmed

    Thumbnail for Connected UX

    Connected UX

    Aarron Walter

    Thumbnail for The Future of JavaScript: ECMAScript 6

    The Future of JavaScript: ECMAScript 6

    Axel Rauschmayer

    Thumbnail for Validating Forms with the HTML5 Pattern Attribute

    Validating Forms with the HTML5 Pattern Attribute

    Chris Lienert

    Thumbnail for Functional Javascript

    Functional Javascript

    Dhanji R. Prasanna

    Thumbnail for Oh No! Spaghetti Code!

    Oh No! Spaghetti Code!

    Fiona Chan

Conffab
  • About
  • Speakers
  • Presentations
  • Conferences
  • Contact
  • Sign in
Sign Up

© Conffab 2025