PG Day Us: Animations for Web & Hybrid
Download as PPTX, PDF1 like397 views
The document provides an overview of animation techniques for web and hybrid applications, focusing on performance and best practices for achieving optimal frame rates. It discusses various animation methods (declarative vs. imperative), the rendering process, and tools like the Intersection Observer API and animation frames for improved efficiency. The presentation emphasizes the importance of leveraging hardware acceleration and managing layers to enhance animation performance.
PG Day Us: Animations for Web & Hybrid
- 1. Animations for Web & Hybrid @alexblom Isle of Code
- 2. whoami
- 3. Isle of Code • Toronto + Houston based development; • Focused on Ember/Vue/React/Cordova; • Creators of ember-cordova & corber;
- 4. corber.io • Extension of ember-cordova; • Supports Ember, Vue, React, Glimmer; • CLI for framework -> hybrid builds; • Adds livereload, unified builds, splash/icons, etc;
- 5. corber demo
- 6. Contents • What makes a good animation?; • Profiling / performance; • 3 examples; • Additional options (promoting layers, JS animation API);
- 7. What makes a good animation?
- 8. FPS Target • 60fps is considered best; • 1000ms / 60fps = ~16.6ms per frame; • 60fps is not always achievable!; • It is better to deliver a consistent frame rate than a variable one. Consider targeting 30fps;
- 9. Animation Options • Declarative: CSS; • Generally speaking most performant; • Browser knows what is happening up front - can save you from yourself; • Can become complex to write;
- 10. Animation Options • Imperative: JS; • Tell the browser how. Easier to spell out in code (e.g. bounce); • Run on the main thread (not great); • requestAnimationFrame & webAnimationsAPI can fix performance issues - to be discussed later;
- 12. From 0 to rendered
- 13. How our content is rendered • 1: DOM Tree constructed; • 2: Layout (recursively from the top left); • highly interdependent; • expensive;
- 14. Layout Styles width overflow/overflow-y min-width font-weight height font-size min-height text-align padding line-height display vertical-align border white-space border-width clear position bottom/top/left/right float
- 15. Reflow
- 16. What causes Reflow? • Resizing the browser window; • using JavaScript methods involving computed styles; • adding or removing elements from the DOM; and • changing an element's classes. • https://developers.google.com/speed/articles/reflo w
- 17. How our content is rendered • 1: DOM Tree constructed; • 2: Layout (recursively from the top left); • 3: Paint;
- 18. Paint Styles border-style outline border-radius outline-color background outline-width background-size outline-style background-image color background-repeat visibility background-position text-decoration box-shadow
- 19. Paint Styles • opacity is a special case; • If the element has its own layer, this is handled automagically by lowering the alpha-mask value;
- 20. How our content is rendered • 1: DOM Tree constructed; • 2: Layout (recursively from the top left); • 3: Paint; • 4: Composite/Layering (default is a single layer);
- 21. Layers • Default is a single layer; • Composed layer more efficient to animate - GPU; • Pushing every node to it’s own layer is the worst case; • The most performant is hardware accelerated properties on composite layers (e.g. transform/translateX); • Layers are expensive (width * height * 3);
- 22. Promoting a Layer • will-change property, e.g.; • will-change: auto; • will-change: scroll; • will-change: transform;
- 23. Prior Layers
- 24. Add will-change;
- 25. Layers
- 26. Layout Thrashing
- 27. Layout Thrashing
- 28. Profiler Tool
- 29. Profiler Tool
- 30. Profiler Tool
- 31. Profiler Tool
- 32. Profiler Tool
- 34. Animation 1 - The worst case
- 35. Animation 1
- 36. Animation 1
- 40. Some of our problems • Big FPS dip; • Each animation is triggering a reflow; • We are not taking advantage of hardware- accelerated properties; • We are redrawing at a fixed (but not) rate; • Will keep running in an unfocused tab;
- 41. We are redrawing at a fixed rate • Sort of: • interval timing is not guaranteed - if our thread is busy it will take longer; • When a tab is inactive the interval will still fire every ~1s;
- 44. CSS3 Animation • animation-duration; • animation-delay; • animation-timing; • ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier;
- 45. Why don’t we try them in this case?
- 46. But CSS animations are hard!
- 47. Animation API
- 49. Animation 2 - Hardware Accelerated
- 52. Animation 2
- 54. Timeline
- 56. Profile • 6248ms to 5420ms on scripting; • 10588ms to 4818ms rendering; • 267ms to 1488ms painting;
- 57. Some of our problems • Big FPS dip (sort of); • Each animation is triggering a reflow; • We are not taking advantage of hardware- accelerated properties; • Will keep running in an unfocused tab; • We are redrawing at a fixed rate;
- 58. Animation Frames
- 59. animationFrame • Supported for major browsers; • Only draws when: • the animation will be visible; • the browser is ready; • there are no other frames waiting to be drawn; • Eliminates unnecessary draws & overloaded callbacks;
- 61. animationFrame
- 62. animationFrame
- 65. Profile • 5420ms to 2605ms on scripting; • 4818ms to 5295ms rendering; • 1488 to1557ms painting;
- 66. Some of our problems • Big FPS dip; • Each animation is triggering a reflow; • We are not taking advantage of hardware- accelerated properties; • This will keep running in an unfocused tab; • We are redrawing at a fixed rate;
- 67. Still could be better • Immediate reaction may be to tear down unused elements; • Don’t
- 69. Demo
- 71. Profile • 2605ms to 1068ms on scripting; • 5295ms to 2100ms rendering; • 1557 to 702ms painting;
- 73. Intersection Observer API • “The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s.” • https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
- 75. Intersection Observer API • callback function receives a list of intersections detected;
- 77. Passive Event Listener • Allows you to indicate preventDefault will not be used - e.g. eliminates block on scroll
- 78. My best practices • Avoiding JS Animation API until better Safari support; • Pages with smaller animations (e.g. button bounce): • CSS/Hardware accelerated animations are fine; • Will generally promote frequent/transitional animations to their own layer; • Pages with lots of animations: • Just use animationFrame;
- 79. Animations for Web & Hybrid @alexblom Isle of Code