As presented at the HalfStack London 2017

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

4. Starability.css
Repaintless.css Auroral.css

6. zdjęcie lampy

7. Loading…

8. https://www.arpio.pl/

9. https://dribbble.com/arnaudlrx

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 optimise 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)
C. Frameworks (Greensock AP, anime.js)

17. How browser renders a website?

18. First render

19. First render
GPU acceleration

20. Any change on a page

21. Any change on a page

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

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

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

25. transform, opacity
The two properties to animate nicely

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

27. Layer promotion

28. Layers creation

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

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

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

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

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

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

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

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

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

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

43. Every layer consumes memory.
Use them wisely.

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

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

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

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

48. FLIP technique
First
Last
Invert
Play

49. FLIP technique
A B
0 200px

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

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

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

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

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

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

56. 100ms gap

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

58. requestAnimationFrame()

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

61. without requestAnimationFrame()

62. without requestAnimationFrame()

63. with requestAnimationFrame()

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

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

66. A B
B A
A
Test your animations
A B
B A

73. Debugging time!
This pen was created by @shshaw

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

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

76. Thanks!
Anna Migas
@szynszyliszys