Matters In Motion (Or How Rob Lowe Should Animate The Web)

There is quite a bit of video in these slides which unfortunately doesn't show on the old speakerdeck, but links to sites recorded & other resources are below:

Slide 2
http://activetheory.net

Slide 4
http://www.google.com/design/spec/material-design

Slide 5
http://codepen.io

Slide 15
http://spacecraftforall.com

Slide 26
https://vimeo.com/93206523
http://minyos.its.rmit.edu.au/aim/a_notes/anim_principles.html

Slide 28
http://easings.net

Slide 29
http://cubic-bezier.com/

Slide 30
http://tympanus.net/Development/TextInputEffects/index2.html

Slide 33
http://1000.chromeexperiments.com/
https://www.youtube.com/user/coachella

Slide 35
http://codepen.io/ma77os/full/KGIEh/

Slide 42
http://www.propelwater.com/

Slide 44
http://while-were-young.com/

Slide 55 -58
http://csstriggers.com/
also see: http://jankfree.org/ for lots of resources on performance with animation

Slide 62:
http://codepen.io/rachsmith/pen/bNPyNb

Slide 65:
http://codepen.io/rachsmith/pen/Pwrvqg

Transcript

1. MATTERS IN MOTION (Or how Rob Lowe should animate the web) Rachel Smith @rachsmithtweets
3. WEB ANIMATION WENT MAINSTREAM Rachel Smith @rachsmithtweets In 2014
4. BOOM
6. ANIMATION. SO HOT RIGHT NOW. ANIMATION
7. Motion design is difficult
8. User Experience Design is difficult
9. Front End Development is difficult
10. Combining all three is CRAZY DIFFICULT
11. HOW DO I USE ANIMATION IN MY CLIENT WORK? Thats a cool demo, but and how do I do it well?
12. HOW ROB LOWE SHOULD ANIMATE THE WEB
13. Forward thinking Rob Lowe makes motion a priority. Overworked and under- budgeting Rob Lowe tacks animation on to the end of the project.
14. Constraints In the real world web projects have (budget & timeline) Stakeholders Audience
15. HOW?
16. - Priorities - Project Timeline - Objectives - Trade-offs Different
17. PROPOSAL DESIGN DEVELOPMENT QUALITY ASSURANCE PROPOSAL ANIMATION DESIGN DEVELOPMENT QUALITY ASSURANCE PROTOTYPE ANIMATION Typical (simplified) web project timeline Active Theory web project timeline
18. First Mistake Start with designing static states without thought how to gracefully move between them. Developers/motion designers need to be involved from the beginning
19. Time/$$$ for development prototype build cross-browser testing/QA accessibility SEO animation
20. Time/$$$ for development prototype build cross-browser testing/QA accessibility SEO animation SOMETHING’S GOTTA GIVE
21. TRADE-OFFS Prioritizing animation could mean sacrificing in other areas. What is more important in your project?
22. LOADERS
23. If you can’t allocate resources to doing web animation well - you could end up with a worse experience for your users. ‘Phoning it in’ is dangerous.
24. Managing client expectations is very important.
25. Talented Rob Lowe uses interesting animation timing. Average Rob Lowe uses linear motion.
26. Disney’s 12 principles of animation Rachel Smith @rachsmithtweets Just starting?
27. MASTER EASING First thing:
30. Codrops example
31. TAKE INSPIRATION
 FROM REAL-LIFE MOTION (PHYSICS) Next level:
32. Use JavaScript to imitate forces (gravity, friction)
33. Google Example
34. TRADE SECRET: LERP
35. Lerp example
36. Careful Rob Lowe uses restraint and animates with purpose. Overzealous Rob Lowe animates all the things!!!!
37. ANIMATION IS FOR COMMUNICATION NOT DECORATION
38. Transitions between states “This is how you ended up here from where you before”
39. Introducing new content “There is new content being added to the page right now”
40. Guiding user journey “You should click here next”
41. An overall feeling/message “This product is exciting and cool and modern and you should totally buy it!”
42. Propel example
43. Web design visual hierarchy applies to animations as well! what do your animations say?
45. Don’t forget that people have to use your stuff Motion design for interaction is not the the same as animation for video or traditional motion graphics.
46. Take your initial timing to complete an animation and halve it. TRADE SECRET: (and maybe even halve it again)
47. “Take one item off before you leave the house”
48. You might have to remove some animation Audience/function Performance Motion sickness
49. ‘FALLBACKS’ Not as simple as ‘removing the animation’ How are you going to communicate the things you were communicating with the animation?
50. Time/$$$ for development prototype build cross-browser testing/QA accessibility SEO animation
51. Struggling Rob Lowe hacks other people’s JavaScript together. Fabulous Rob Lowe learns how to write his own JavaScript.
52. Complex, performing animations can not be ‘plugged in’ Using an animation library != fabulous animated website
53. Common mistakes: Inefficient JavaScript can kill your FPS INEFFICIENT RENDER LOOPS
54. library 1 requestAnimationFrame() library 2 requestAnimationFrame() plugin 1 requestAnimationFrame() plugin 2 requestAnimationFrame()
55. Don’t change properties that cause layout / repaint in your loop. AVOID width height margin padding top left many others… THESE ARE P COOL transform (translate, scale, rotation opacity CHECK OUT CSS TRIGGERS.COM
56. Common mistakes: Inefficient JavaScript can kill your FPS RENDER LOOPS EVENT MISMANAGEMENT
57. WHEN SOMEONE ASKS ME TO MAKE A ‘PARALLAX’ WEBSITE
58. ‘LEFT’ I SOLEMNLY SWEAR, THAT I WILL NOT UPDATE THE ‘TOP’ OR PROPERTIES OF ELEMENTS EVERY TIME THE SCROLL EVENT FIRES
59. ENJOYING ALSO, RACHEL. I AM REALLY THIS TALK SO FAR. WELL DONE
60. In your requestAnimationFrame() When the scroll event fires Set target Update to target consider debouncing same goes for resize, DeviceOrientation etc
61. Common mistakes: Inefficient JavaScript can kill your FPS RENDER LOOPS EVENT MISMANAGEMENT MEMORY MISMANAGEMENT
67. BE THAT ROB LOWE!!! Prioritize animation Use interesting timing Animate with purpose Learn JavaScript
68. That was just a small part of what I wanted to talk about. Let’s chat! Rachel Smith @rachsmithtweets
69. THANK YOU! Rachel Smith @rachsmithtweets