This document discusses using animation to enhance user experiences on the web. It covers animation principles like easing functions, appeal through character attributes, using animation for storytelling and UI, and imitating real-world physics and weight. The document emphasizes experimenting with animation to craft experiences and addresses challenges like browser support and limitations.

1. Designing
Motion
Make Animation On The Web Extra Awesome!

2. I CSS

3. Behaviour Layer
Style Layer
Content Layer

4. Experience
Behaviour
Content
Presentation

5. These changing times

9. “ Experience is now the
material, not ceramic or
plastic.
”
Liz Danzico, SVA

12. Transformitionamations

19. ease
linear
ease-in
ease-out
ease-in-out

20. ease
linear
ease-in
ease-out
ease-in-out
cubic-bezier

22. A B

23. {...}

25. Animation for UI

28. Animation for
storytelling

31. Metaphor
What are you imitating?

37. Weight & Physics
Light as a feather. Stiff as a board.

40. Transference

43. Appeal
The idea that various aspects of the character’s
attributes come together to just feel “right”.

45. “... it’s easy to forget that when you’re
building a game you’re not just building a
set of rules or a pile of content. You’re
crafting and experience...
Animation happens to be my weapon of
choice to achieve this”
[Mika Mobile blog post]

46. Internet != Cartoon

47. Are we there yet?
“Point B” isn’t static.

52. Semantics Matter
We care about that codestuffs

53. The DOM

54. New Things!!
yay?

55. Fallbacks+
browsers, devices, the future, oh my!

58. Multiples &
Workflow

59. Behaviour Layer
Style Layer
Content Layer

60. Limitations
think of them as your friend. for real.

65. Go Play!
Experiment. Make things. Have fun.

66. Files & Slides:
valhead.com
Let’s Chat:
val@valhead.com • @vlh