Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Zurich - Make your animations perform well

107 views

Published on

A short version of a talk (15min) presented at Web Zurich in December 2017

Published in: Software
  • Be the first to comment

  • Be the first to like this

Web Zurich - Make your animations perform well

  1. 1. Front-end Dev & Designer at Lunar Logic Anna Migas
  2. 2. Anna Migas @szynszyliszys Make your animations perform well
  3. 3. zdjęcie krzeseł http://ancorathemes.com/
  4. 4. Don’t use animations if they are not helping anyone
  5. 5. How browser renders a website?
  6. 6. First render
  7. 7. First render Layers
  8. 8. First render GPU accelerationLayers
  9. 9. Any change on a page
  10. 10. Any change on a page
  11. 11. 1. We change layout (width, margin-top, left)
  12. 12. 2. We change paint (background-color, box-shadow, background-image)
  13. 13. 3. We change compositing (transform, opacity) https://csstriggers.com/
  14. 14. transform, opacity The two properties to animate nicely
  15. 15. zdjęcie krzeseł margins + box-shadow transforms + opacity
  16. 16. Layer promotion
  17. 17. Layers creation
  18. 18. Layers creation
  19. 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. 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; }
  21. 21. 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
  22. 22. 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
  23. 23. @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; }
  24. 24. will-change rules 1. Give a browser a moment to think
  25. 25. .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; }
  26. 26. will-change rules 1. Give a browser a moment to think 2. Don’t try to optimise too many elements
  27. 27. *, *::before, *::after { will-change: all; } DON’T EVER DO THIS.
  28. 28. Every layer consumes memory. Use them wisely.
  29. 29. 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
  30. 30. 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
  31. 31. 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'; }
  32. 32. 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);)
  33. 33. FLIP technique First Last Invert Play
  34. 34. FLIP technique A B 0 200px
  35. 35. FLIP technique A B 0 200px -200px 0
  36. 36. B A .element { position: absolute; } .element
  37. 37. B A .element { position: absolute; transform: translateX(-200px); } .element
  38. 38. B A .element { position: absolute; transform: translateX(-200px); transition: transform 1s; } .element
  39. 39. B A .element { position: absolute; transform: translateX(-200px); transition: transform 1s; } .element.active { transform: none; } .element
  40. 40. B A .element { position: absolute; transform: translateX(-200px); transition: transform 1s; } .element.active { transform: none; } .element .active
  41. 41. 100ms gap
  42. 42. FLIP technique
  43. 43. FLIP technique 1. Can make a difference on less powerful devices
  44. 44. FLIP technique 1. Can make a difference on less powerful devices 2. Use it for animations that will happen on user input
  45. 45. 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
  46. 46. 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
  47. 47. 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/
  48. 48. requestAnimationFrame()
  49. 49. requestAnimationFrame() 1000ms/60 = 16ms 1 frame
  50. 50. without requestAnimationFrame()
  51. 51. without requestAnimationFrame()
  52. 52. without requestAnimationFrame()
  53. 53. with requestAnimationFrame()
  54. 54. requestAnimationFrame function repeated() { // do something many times window.requestAnimationFrame(repeated); } window.requestAnimationFrame(repeated);
  55. 55. 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
  56. 56. A B B A A Test your animations A B B A
  57. 57. 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
  58. 58. 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
  59. 59. Thanks! Anna Migas @szynszyliszys

×