1. Looping for Animation SassConf :D

2. Hi! María Evangelina Ferreira - @evaferreira92@evaferreira92

3. I love CSS ❤‍❤‍❤‍❤‍❤‍❤‍

4. Animation with Sass Why Sass?

5. Animation with CSS can be… Well, try animating gradients.

6. Animating with Sass Maintainable Automated Faster …DRY

7. Prepros Live-Preview

8. Set up & Files http://evaferreira.com.ar/sassconf + Prepros || Codepen || Your favorite compiler

9. Loops! But before that…

10. A Short Recap Variables Conditional Mixins Loops For While HSL / RGB

11. Variables To store information

12. Variables To save information for later It’s content will change It needs a name to identify it

13. Variables in Sass $name: value;

14. Variables in Sass $name: value; $main-color: #BADA55; $alt-color: #C0FFEE; $duration: 5s;

15. Variables in Sass $name: value; $main-color: #BADA55; $alt-color: #C0FFEE; $duration: 5s; or $duration: 5; $duration + s;

16. Conditionals If this… then that.

17. Conditionals

18. Conditionals in Sass @if something > this { this } @else { that }

19. Conditionals in Sass

20. Mixins Group CSS declarations for later use With optional arguments

21. Mixins

22. Mixins result

23. Mixins for prefixes

24. Loops For & While

25. Loops For: I know how many times While: I don’t know how many times

26. Or better explained… In The Big Bang Theory

27. Loops in The Big Bang Therory

30. Loops in Sass @while $this > 10{ // this repeats } @for $i from 1 through 10{ // this repeats }

31. Loops in Sass -> For loop

32. Loops in Sass -> While loop

33. HSL & RGB! Because colors are great!

34. Colors in RGB Red/Green/Blue It can get confusing.

35. Color with HSL Colors with HSL Hue/Chroma (0-360°) Saturation (0-100%) Lightness (0-100%)

36. Colors in HSL $hue: random(360); background-color: hsl($hue, 60%, 65%); // Try to keep the same Saturation and Lightness

37. Color with HSL Pastel colors: (0-360°), (~70%), (~80%)

38. Color with HSL Pastel colors: (0-360°), (~70%), (~80%) From cyan to blue: 140 + random(130/140)

39. Let’s try that! 1_colors/

41. Let’s @for it! @for + HSL /2_simple_loop_menu

42. Tip To write a little less

43. Shorthand

44. CSS animation-name: show; animation-duration: 1s; animation-fill-mode: forwards; animation-timing-function: ease; animation-iteration-count: infinite; animation-play-state: paused; Sass (also works in scss) animation: name: show duration: 1s fill-mode: forwards timing-function: ease iteration-count: infinite play-state: paused

45. This

46. Delays in equal elements ul li:nth-child(1…5) a{ Different color in each Animation-delay is different and incrementable }

47. Delays with CSS:

48. Get it better with: @for

49. Part 1 @for $i from 1 through 5 ul li:nth-child(#{$i}) a animation-delay: 0.5s

50. Part 2 $delay: 0.5 @for $i from 1 through 5 ul li:nth-child(#{$i}) a animation-delay: $delay + s $delay: $delay + 0.5

51. Now the colors!

52. Color in HSL HSL Hue (0-360°) Saturation(0-100%) Lightness (0-100%) Pastel colors: (0-360°), (~70%), (~80%) From cyan to blue: 140 + random(130/140)

53. Part 3 $delay: 0.5 @for $i from 1 through 5 ul li:nth-child(#{$i}) a animation-delay: $delay + s $hue: random(360) background-color: hsl($hue, 60%, 65%) $delay: $delay + 0.5

55. Now @for in SVG!

56. About animation in SVG Have you ever animated SVG?

58. SVG + Looping /3_loop_svg

59. The flower – The SVG 6 petals -> Paths in a group #petals Each petal with a.petal class 1 center ->.center class External CSS

60. The flower – The SVG

61. Let’s work! flower.scss

63. Same with a tree 4/tree_and_bird

64. Transform-origin

65. Transform-Origin You can measure with Photoshop or a similar tool Need to be an absolute value (~Firefox 41/43)

66. Some Transform-Origins

68. Rainbow /5_rainbow

69. From red to red Round the chroma circle in one @animation

70. From 0 to 360 HSL -> We modify only Hue Which goes from 0 to 360 degrees But… We should fit those 360 degrees in our 100% keyframes values

71. Let’s forget about Sass (for now!)

72. I mean…

73. This @keyframes rainbow{ 0%{ color: hsl(0, 60%, 60%); } 1%{ color: hsl(1, 60%, 60%); } 2%{ color: hsl(2, 60%, 60%); } ………… }

74. Besides the hassle, It’s not possible to fit 360 in 100 this way.

75. But @keyframes can take values with decimals too.

76. This @keyframes rainbow{ 0%{ color: hsl(0, 60%, 60%); } 0.5%{ color: hsl(1, 60%, 60%); } 1%{ color: hsl(2, 60%, 60%); } ………… }

77. This way we can fit more colors (in fact, we can fit all the 360 degrees)

78. We only need to know how to fit them Cross-Multiplication to the rescue!

79. Find the right number 360 ----- 100 1 ----- X 1 * 100 / 360 = 0.2777778

80. Now This @keyframes rainbow{ 0%{ color: hsl(0, 60%, 60%); } 0.279%{ color: hsl(1, 60%, 60%); } 0.558%{ color: hsl(2, 60%, 60%); } ………… }

81. That’s how we fit all the 360 degrees

82. So we create our SCSS loop!

84. SVG Unicorn /6_unicorn

86. Timing-Functions

87. Ease (default) Ease-in Ease-in-out Ease-out Linear Cubic-Bezier() Steps() Cubic-Bezier() Ease (default) Ease-in Ease-in-out Ease-out Linear Steps()

88. Timing-Functions (IMHO) Cubic-Bezier() Ease (default) Ease-in = Gravity Ease-in-out Ease-out Linear = Means constant velocity (no acceleration) Steps()

89. Check them out! /7_basic_timing_functions

90. More timing options Progress over time http://cubic-bezier.com

91. Some cool timings by Firefox Dev Tools

92. Save your timing- functions (because defaults are not enough!) /8_timing-functions

93. Save timing-functions In a partial file and import it for future projects Or simply at the beginning for this one.

95. Stop-Motions With the steps() timing-function

96. Stop-Motions

98. Using steps() To create stop-motion animations http://www.harrypottertheplay.com/ /9_steps

99. Example

100. Wings with steps 5070px wide 318px height 12 frames 5070/12 = 422px each frame This is our window

102. Stop-Motions with Mixins /10_smiles