Reduced GPU cycles by only animating annotations when visible

Author: squidfunk

material/assets/javascripts/bundle.efad133d.min.js renamed to material/assets/javascripts/bundle.8a488aaa.min.js

@@ -34,7 +34,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.c382b1dc.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.1c3799f8.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.cc9b2e1e.min.css' | url }}">
@@ -214,7 +214,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.efad133d.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.8a488aaa.min.js' | url }}"></script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

material/assets/javascripts/bundle.efad133d.min.js.map renamed to material/assets/javascripts/bundle.8a488aaa.min.js.map

@@ -32,6 +32,8 @@ import {
   map,
   switchMap,
   take,
+  takeLast,
+  takeUntil,
   tap,
   throttleTime
 } from "rxjs"
@@ -42,7 +44,8 @@ import {
   getElementSize,
   watchElementContentOffset,
   watchElementFocus,
-  watchElementOffset
+  watchElementOffset,
+  watchElementVisibility
 } from "~/browser"
 
 import { Component } from "../../../_"
@@ -128,6 +131,14 @@ export function mountAnnotation(
       }
     })
 
+    /* Start animation only when annotation is visible */
+    const done$ = push$.pipe(takeLast(1))
+    watchElementVisibility(el)
+      .pipe(
+        takeUntil(done$)
+      )
+        .subscribe(visible => el.toggleAttribute("data-md-visible", visible))
+
     /* Track relative origin of tooltip */
     push$
       .pipe(

material/assets/stylesheets/main.c382b1dc.min.css renamed to material/assets/stylesheets/main.1c3799f8.min.css

@@ -186,12 +186,15 @@
       transition:
         color            250ms,
         background-color 250ms;
-      animation: pulse 2000ms infinite;
       content: "";
 
       // [reduced motion]: Disable animation
-      @media (prefers-reduced-motion) {
-        animation: none;
+      @media not all and (prefers-reduced-motion) {
+
+        // Annotation marker is visible
+        [data-md-visible] > & {
+          animation: pulse 2000ms infinite;
+        }
       }
 
       // Annotation marker on focus/hover