Motion U.I with style

Talk given Conferência CSS 2015 Brazil.

Link to video interfaces:
https://www.dropbox.com/sh/q37tu816cqga9ij/AABrkeegsvcR5xMpxqTCi2Jsa?dl=0

Links:
http://www.evolutionoftheweb.com
http://lab.hakim.se/flipside/
https://aprilzero.com/
http://tympanus.net/Development/AnimatedGridLayout/
http://tympanus.net/Development/DragDropInteractions/
http://www.raphaelfabeni.com.br/lab-css3/index.html
http://www.bloom.im/
https://speakerdeck.com/addyosmani/jquery-toronto-gone-in-60-frames-per-second
http://jankfree.org/
http://www.hugobessa.com.br/posts/performance-em-animacoes/
https://medium.com/@sureshvselvaraj/animation-principles-in-ui-design-understanding-easing-bea05243fe3
http://matthewlein.com/ceaser/
https://www.youtube.com/watch?v=U9xfYbKxosI
http://codepen.io/zehfernandes/details/lrvEG/
http://ui-animations.tumblr.com/
https://instagram.com/userinterfacesio/
http://capptivate.co/
http://tympanus.net/Development/ButtonComponentMorph/

Transcript

2. ZEH FERNANDES
4. THE GOLDEN AGE OF FLASH THE GOLDEN AGE OF FLASH
7. =
8. The web entered in a aesthetic limbo after the death of flash
12. MEANINGFUL TRANSITIONS MEANINGFUL TRANSITIONS
13. Animation is a layer that helps the interface communicate with the user.
15. "Animation helps brains understand how the information flows." Pasquale D’Silva "Animation helps brains understand how the information flows."
16. ANTECIPATION 01
17. CALL ATTENTION 02
18. GIVE CONTEXT 03
19. FEEDBACK 04
20. BE AWESOME 05
21. “Animation is the new typography, so don’t use Comic Sans" - John Allsopp “Animation is the new typography, so don’t use Comic Sans"
22. { } LET’S DO SOME CODES LET’S DO SOME CODES
26. Properties Properties
27. Position Transform Opacity Color
29. Perfomance Perfomance
30. 60 FPS
33. LAYOUT PAINT COMPOSITE Redraw all elements in the page Redraw just the element and your children Create a new layer to be processed without affect other elements
36. Easing Easing
37. https://medium.com/@sureshvselvaraj/animation-principles-in-ui-design-understanding-easing-bea05243fe3
39. EASE-IN EASE-OUT CUSTOM EASE
42. Timing Timing
43. “.2s to .6s a happy place for small interactions" - Va Head ".2s to .6s a happy place for small interactions"
45. Workflow Workflow
47. TRANSITION VS ANIMATION TRANSITION VS ANIMATION
48. KEYFRAMES IN KEYFRAMES OUT
49. TICKET-IN TICKET OUT
50. JAVASCRIPT JQUERY
51. Debug Debug
53. ease
55. Reference Reference
62. Animations give a lot of work, but the final result is like use the force Illustration by @garlic Animations give a lot of work, but the final result is like use the force