The document provides insights on optimizing web animations, comparing CSS and JavaScript animations, and explaining how browsers render websites and paint changes. It offers guidelines on using properties like 'will-change' and 'requestAnimationFrame', emphasizing the need to avoid overuse of animations and layers. Additionally, it shares resources and best practices for ensuring animations perform efficiently across different devices.

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

2. Anna Migas
@szynszyliszys
Make your animations
perform well

3. Starability.css
Repaintless.css Auroral.css

5. zdjęcie lampy

6. Loading…

7. https://www.arpio.pl/

8. https://dribbble.com/arnaudlrx

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

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

12. CSS vs JavaScript

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

14. JavaScript animations
1. More control over scheduling & timing
2. Many options with different pros/cons
A. Pure JavaScript
B. Web Animation API (polyfill)
C. Frameworks (Greensock AP, anime.js)

15. Ok, so here we go

16. How a browser paints a website?

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

18. The HTML is parsed, DOM created
2

19. Document Object Model

20. Styles are applied
3

21. Render Tree

22. Render Tree

23. Layout is calculated
4

24. Layout

25. Everything is rasterized
and painted to the layers
5

26. Paint

27. Paint

28. Compositing
6

29. Compositing

30. Compositing

31. First render

32. Any change on a page

33. Any change on a page

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

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

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

37. transform, opacity
The two properties to animate nicely

38. Why?

39. 1. GPU acceleration

40. 2. Layer promotion

41. Layers creation

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

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

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

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

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

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

51. .btn {
transition: transform 1s ease-out;
background-color: white;
border: 1px solid blue;
opacity: 0.7;
will-change: opacity;
}
.btn:hover,
.btn:focus {
opacity: 1;
}

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

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

54. Every layer consumes memory.
Use them wisely.

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

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

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

58. 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 (you can use
-webkit-transform: translate3d(0,0,0);)

59. FLIP technique
First
Last
Invert
Play

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

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

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

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

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

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

66. 100ms gap

67. 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/

68. Remember this?
16ms
1 frame

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

71. Now imagine…

72. Try to do that in 16ms

73. requestAnimationFrame()

74. requestAnimationFrame

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

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

77. A B
B A
A
Test your animations
A B
B A

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

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

86. Thanks!
Anna Migas
@szynszyliszys