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

1. View Slide

2. ZEH FERNANDES
   

   View Slide

3. View Slide

4. THE GOLDEN AGE
   OF FLASH
   THE GOLDEN AGE
   OF FLASH
   

   View Slide

5. View Slide

6. View Slide

7. =
   

   View Slide

8. The web entered in
   a aesthetic limbo
   after the death
   of flash
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. MEANINGFUL
    TRANSITIONS
    MEANINGFUL
    TRANSITIONS
    

    View Slide

13. Animation is a layer that helps
    the interface communicate
    with the user.
    

    View Slide

14. View Slide

15. "Animation helps brains understand
    how the information flows."
    Pasquale D’Silva
    "Animation helps brains understand
    how the information flows."
    

    View Slide

16. ANTECIPATION
    01
    

    View Slide

17. CALL ATTENTION
    02
    

    View Slide

18. GIVE CONTEXT
    03
    

    View Slide

19. FEEDBACK
    04
    

    View Slide

20. BE AWESOME
    05
    

    View Slide

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"
    

    View Slide

22. { }
    LET’S DO
    SOME CODES
    LET’S DO
    SOME CODES
    

    View Slide

23. View Slide

24. View Slide

25. View Slide

26. Properties
    Properties
    

    View Slide

27. Position Transform Opacity Color
    

    View Slide

28. View Slide

29. Perfomance
    Perfomance
    

    View Slide

30. 60 FPS
    

    View Slide

31. View Slide

32. View Slide

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
    

    View Slide

34. View Slide

35. View Slide

36. Easing
    Easing
    

    View Slide

37. https://medium.com/@sureshvselvaraj/animation-principles-in-ui-design-understanding-easing-bea05243fe3
    

    View Slide

38. View Slide

39. EASE-IN
    EASE-OUT
    CUSTOM EASE
    

    View Slide

40. View Slide

41. View Slide

42. Timing
    Timing
    

    View Slide

43. “.2s to .6s a happy place for small
    interactions"
    - Va Head
    ".2s to .6s a happy place for small
    interactions"
    

    View Slide

44. View Slide

45. Workflow
    Workflow
    

    View Slide

46. View Slide

47. TRANSITION VS ANIMATION
    TRANSITION VS ANIMATION
    

    View Slide

48. KEYFRAMES IN KEYFRAMES OUT
    

    View Slide

49. TICKET-IN
    TICKET OUT
    

    View Slide

50. JAVASCRIPT
    JQUERY
    

    View Slide

51. Debug
    Debug
    

    View Slide

52. View Slide

53. ease
    

    View Slide

54. View Slide

55. Reference
    Reference
    

    View Slide

56. View Slide

57. View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

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
    

    View Slide

63. View Slide