Reduced GPU cycles by only animating annotations when visible

src/assets/javascripts/components/content/annotation/_/index.ts

@@ -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(