Designing Motion with CSS3 and JavaScript

Making awesome animations with web standards and how CSS transitions can come in handy. As seen at FITC Toronto 2012

Transcript

1. Designing Motion Make Animation On The Web Extra Awesome!
2. I CSS
3. Content Layer Style Layer Behaviour Layer
4. Content Presentation Behaviour Experience
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. The idea that various aspects of the character’s attributes come together to just feel “right”. Appeal
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. Content Layer Style Layer Behaviour 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