The document discusses animation performance techniques for web development, comparing CSS and JavaScript animations, as well as highlighting when to use animations effectively. It covers browser rendering processes, the importance of utilizing GPU acceleration, and best practices such as using 'will-change' and 'requestAnimationFrame'. Additionally, it advises on minimizing resource use and testing animations for optimal performance.

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. Compositing
6

30. Compositing

31. First render

32. Any change on a page

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

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

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

36. transform, opacity
The two properties to animate nicely

37. Why?

38. 1. GPU acceleration

39. 2. Layer promotion

40. Layers creation

41. 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

42. @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;
}

44. @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;
}

46. 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

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;
will-change: transform;
}
.btn:hover {
-webkit-animation: rotate 1s infinite;
animation: rotate 1s infinite;
}

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

50. .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;
}

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

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

53. Every layer consumes memory.
Use them wisely.

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

55. 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

56. 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';
}

57. 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);)

58. FLIP technique
First
Last
Invert
Play

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

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

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

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

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

64. 100ms gap

65. FLIP technique
1. Can make a difference on less powerful devices
2. Use it 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/

66. Remember this?
16ms
1 frame

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

69. Now imagine…

70. Try to do that in 16ms

71. requestAnimationFrame()

72. requestAnimationFrame

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

74. 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

75. A B
B A
A
Test your animations
A B
B A

81. 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

82. 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

83. Grazie!
Anna Migas
@szynszyliszys
Questions?