The talk was given at Codemotion conference in Rome.

1. Anna Migas
@szynszyliszys
Make your animations
perform well

2. Front-end Dev & Designer
at Lunar Logic
Anna Migas

7. zdjęcie lampy

8. Loading…

9. https://www.arpio.pl/

10. https://dribbble.com/arnaudlrx

12. zdjęcie krzeseł
http://ancorathemes.com/

13. Don’t use animations
if they are not helping anyone

14. CSS vs JavaScript

15. CSS animations
1. Great for simple animations
2. Browsers optimize for them (GPU acceleration)
3. Native, no need to download anything
4. Need vendor prefixes (@-webkit-keyframes)
5. Scheduling animations together in time is hard

16. JavaScript animations
1. More control over scheduling & timing
2. Many options with different pros/cons
A. Pure JavaScript
B. Web Animation API (polyfill & vendor prefixes)
C. Frameworks (recommended: Greensock AP)

17. Ok, so here we go

18. How a browser paints a website?

19. Browser makes a get request,
receives HTML in return
1

20. The HTML is parsed, DOM created
2

21. Document Object Model

22. Styles are applied
3

23. Render Tree

24. Render Tree

25. Layout is calculated
4

26. Layout

27. Everything is rasterized
and painted to the layers
5

28. Paint

29. Paint

30. Compositing
6

31. Compositing

32. Compositing

33. First render

34. Any change on a page

35. Any change on a page

36. 1. We change layout
(width, margin-top, left)

37. 2. We change paint
(background-color, shadows, background-image)

38. 3. We change compositing
(transform, opacity)
https://csstriggers.com/

39. transform, opacity
The two properties to animate nicely

40. Why?

41. 1. GPU acceleration

42. 2. Layer promotion

43. Layers creation

44. What creates new layers?
1. 3D or perspective transforms
2. Animated 2d transforms or opacity
3. Being on top/a child of a compositing layer
4. Accelerated CSS filters
5. In special cases <video>, <canvas>, plugins

45. @keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.btn {
background-color: white;
border: 1px solid blue;
-webkit-animation: rotate 1s infinite;
animation: rotate 1s infinite;
}

47. @keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.btn {
background-color: white;
border: 1px solid blue;
}
.btn::hover {
-webkit-animation: rotate 1s infinite;
animation: rotate 1s infinite;
}

49. What creates new layers?
1. 3D or perspective transforms
2. Animated 2d transforms or opacity
3. Being on top/a child of a compositing layer
4. Accelerated CSS filters
5. In special cases <video>, <canvas>, plugins
6. will-change property

50. @keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.btn {
background-color: white;
border: 1px solid blue;
will-change: transform;
}
.btn:hover {
-webkit-animation: rotate 1s infinite;
animation: rotate 1s infinite;
}

52. will-change rules
1. Give a browser a moment to think

53. .btn {
transition: transform 1s ease-out;
background-color: white;
border: 1px solid blue;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
.btn:hover {
will-change: transform;
}
.btn:active {
-webkit-transform: none;
transform: none;
}

54. will-change rules
1. Give a browser a moment to think
2. Don’t try to optimize too many elements

55. “With great power comes great
responsibility.”
— Spiderman’s Uncle

56. Every layer consumes memory.
Use them wisely.

57. *,
*::before,
*::after {
will-change: all;
}
DON’T EVER DO THIS.

58. will-change rules
1. Give a browser a moment to think
2. Don’t try to optimize too many elements
3. Use it in stylesheets only if the change will
happen constantly

59. will-change rules
1. Give a browser a moment to think
2. Don’t try to optimize too many elements
3. Use it in stylesheets only if the change will
happen constantly
4. It is a good idea to remove it once the
animation is finished

60. var element = document.getElementById(‘element’);
element.addEventListener(‘mouseenter’, hintBrowser);
element.addEventListener('animationEnd', removeHint);
function hintBrowser() {
this.style.willChange = 'transform';
}
function removeHint() {
this.style.willChange = 'auto';
}

61. will-change rules
1. Give a browser a moment to think
2. Don’t try to optimize too many elements
3. Use in the stylesheets if the change happens
constantly
4. Remove it once the animation is finished
5. Not supported in IE, Edge, Safari (you can use
-webkit-transform: translate3d(0,0,0);)

62. FLIP technique
First
Last
Invert
Play

63. FLIP technique
A B
0 200px
-200px 0

64. FLIP technique
A B
@keyframes slide-from-left-flip {
0% {
-webkit-transform: translateX(-200px);
transform: translateX(-200px);
}
100% {
-webkit-transform: none;
transform: none;
}
}

65. B A
.element {
position: absolute;
}
.element

66. B A
.element {
position: absolute;
transform: translateX(-200px);
}
.element

67. B A
.element {
position: absolute;
transform: translateX(-200px);
transition: transform 1s;
}
.element.active {
transform: none;
}
.element
.active

68. 100ms gap

69. FLIP technique
1. Can make a difference on less powerful devices
2. Use for animations that will happen on user input
3. https://github.com/googlechrome/flipjs
4. https://github.com/szynszyliszys/repaintless
5. https://aerotwist.com/blog/flip-your-animations/

70. Remember this?
16ms
1 frame

71. 1000ms/60 = 16ms
60fps
1s = 1000ms

73. Now imagine…

74. Try to do that in 16ms

75. requestAnimationFrame()

76. requestAnimationFrame

77. requestAnimationFrame
function repeated() {
// show something many times
window.requestAnimationFrame(repeated);
}
window.requestAnimationFrame(repeated);

78. requestAnimationFrame
1. Needs vendor prefixes
2. You need the polyfill to support older browsers
3. Don’t need to use that if you are using: Web
Animation API, Greensock AP, jQuery 3.0.0+
4. cancelAnimationFrame to end scheduling
5. Way better than setInterval

79. A B
B A
A
Test your animations
A B
B A

85. Summary
1. Don’t overuse animations
2. Animate only transform and opacity if possible
3. Use will-change, requestAnimationFrame,
FLIP when applicable
4. Don’t overuse layers
5. Animate elements that are at the top layers
6. Test animations before optimising

86. Resources
1. https://www.html5rocks.com/en/tutorials/speed/high-performance-
animations
2. http://jankfree.org
3. https://dev.opera.com/articles/css-will-change-property
4. http://creativejs.com/resources/requestanimationframe
5. https://www.udacity.com/course/browser-rendering-optimization--
ud860
6. https://www.html5rocks.com/en/tutorials/speed/layers
7. https://developers.google.com/web/fundamentals/design-and-ui/
animations

87. Grazie!
Anna Migas
@szynszyliszys
Questions?