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

2. Anna Migas
@szynszyliszys
Make your animations
perform well

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

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

5. How browser renders a website?

6. First render

7. First render
Layers

8. First render
GPU accelerationLayers

9. Any change on a page

10. Any change on a page

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

12. 2. We change paint
(background-color, box-shadow, background-image)

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

14. transform, opacity
The two properties to animate nicely

15. zdjęcie krzeseł
margins + box-shadow transforms + opacity

16. Layer promotion

17. Layers creation

18. Layers creation

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

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

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

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

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

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

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

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

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

31. Every layer consumes memory.
Use them wisely.

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

33. will-change rules
1. Give a browser a moment to think
2. Don’t try to optimise 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

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

35. will-change rules
1. Give a browser a moment to think
2. Don’t try to optimise 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);)

36. FLIP technique
First
Last
Invert
Play

37. FLIP technique
A B
0 200px

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

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

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

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

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

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

44. 100ms gap

45. FLIP technique

46. FLIP technique
1. Can make a difference on less powerful devices

47. FLIP technique
1. Can make a difference on less powerful devices
2. Use it for animations that will happen on user
input

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

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

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

51. requestAnimationFrame()

52. requestAnimationFrame()
1000ms/60 = 16ms
1 frame

54. without requestAnimationFrame()

55. without requestAnimationFrame()

56. without requestAnimationFrame()

57. with requestAnimationFrame()

58. requestAnimationFrame
function repeated() {
// do something many times
window.requestAnimationFrame(repeated);
}
window.requestAnimationFrame(repeated);

59. requestAnimationFrame
1. Doesn’t need vendor prefixes any more
2. You need the polyfill to support old 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. Browser doesn’t play the animation if the tab is
not visible

60. A B
B A
A
Test your animations
A B
B A

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

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

69. Thanks!
Anna Migas
@szynszyliszys