adding text examples for automatic removal of filling animations

Author: chrisdavidmills

web-animations-api/replace-indefinite-animations-2.html

@@ -12,6 +12,9 @@
     body {
       margin: 0;
       height: inherit;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
 
     div {
@@ -32,31 +35,53 @@
   <script>
     const divElem = document.querySelector('div');
 
-    document.body.addEventListener('mousemove', evt => {
-      let anim = divElem.animate(
-        { transform: `translate(${ evt.clientX}px, ${evt.clientY}px)` },
-        { duration: 500, fill: 'forwards' }
-      );
-
-      // commitStyles() writes the end state of the animation to the animated
-      //element inside a style attribute
-      anim.commitStyles();
-
-      // If you explicity want the animations to be retained, then you can invoke persist()
-      // But don't do this unless you really need to — having a huge list of animations
-      // persisted can cause a memory leak
-      //anim.persist()
-
-      // onremove allows you to run an event handler that fires when the animation
-      // was removed (i.e. put into an active replace state)
-      anim.onremove = function() {
-        console.log('Animation removed');
-      }
-
-      // replaceState allows you to query an element to see what its replace state is
-      // It will be active by default, or persisted if persist() was invoked
-      console.log(anim.replaceState);
-    });
+    // Keyframes
+    let growShrink = [
+      { transform: 'scale(1)' },
+      { transform: 'scale(1.5)' }
+    ];
+
+    let rotate360 = [
+      { transform: 'rotate(0deg)' },
+      { transform: 'rotate(360deg)' }
+    ];
+
+    let moveLeftRight = [
+      { transform: 'translateX(0)' },
+      { transform: 'translateX(300px)' },
+      { transform: 'translateX(0)' }
+    ];
+
+    // timing properties
+    let slowInfinite = {
+      duration: 5000,
+      iterations: Infinity,
+      fill: 'forwards'
+    }
+
+    let slowTwice = {
+      duration: 3000,
+      iterations: 2,
+      fill: 'forwards'
+    }
+
+    let animation1 = divElem.animate( growShrink, slowTwice );
+    // commitStyles()
+    animation1.commitStyles();
+
+
+    let animation2 = divElem.animate( rotate360, slowInfinite );
+    animation2.addEventListener('remove', () => {
+      console.log('Animation 2 removed');
+    })
+    // persist()
+    animation2.persist();
+
+    let animation3 = divElem.animate( moveLeftRight, slowInfinite );
+
+    console.log(animation1.replaceState);
+    console.log(animation2.replaceState);
+    console.log(animation3.replaceState);
 
   </script>
 </body>

web-animations-api/replace-indefinite-animations.html

@@ -12,9 +12,6 @@
     body {
       margin: 0;
       height: inherit;
-      display: flex;
-      justify-content: center;
-      align-items: center;
     }
 
     div {
@@ -35,53 +32,31 @@
   <script>
     const divElem = document.querySelector('div');
 
-    // Keyframes
-    let growShrink = [
-      { transform: 'scale(1)' },
-      { transform: 'scale(1.5)' }
-    ];
-
-    let rotate360 = [
-      { transform: 'rotate(0deg)' },
-      { transform: 'rotate(360deg)' }
-    ];
-
-    let moveLeftRight = [
-      { transform: 'translateX(0)' },
-      { transform: 'translateX(300px)' },
-      { transform: 'translateX(0)' }
-    ];
-
-    // timing properties
-    let slowInfinite = {
-      duration: 5000,
-      iterations: Infinity,
-      fill: 'forwards'
-    }
-
-    let slowTwice = {
-      duration: 3000,
-      iterations: 2,
-      fill: 'forwards'
-    }
-
-    let animation1 = divElem.animate( growShrink, slowTwice );
-    // commitStyles()
-    animation1.commitStyles();
-
-
-    let animation2 = divElem.animate( rotate360, slowInfinite );
-    animation2.addEventListener('remove', () => {
-      console.log('Animation 2 removed');
-    })
-    // persist()
-    animation2.persist();
-
-    let animation3 = divElem.animate( moveLeftRight, slowInfinite );
-
-    console.log(animation1.replaceState);
-    console.log(animation2.replaceState);
-    console.log(animation3.replaceState);
+    document.body.addEventListener('mousemove', evt => {
+      let anim = divElem.animate(
+        { transform: `translate(${ evt.clientX}px, ${evt.clientY}px)` },
+        { duration: 500, fill: 'forwards' }
+      );
+
+      // commitStyles() writes the end state of the animation to the animated
+      //element inside a style attribute
+      anim.commitStyles();
+
+      // If you explicity want the animations to be retained, then you can invoke persist()
+      // But don't do this unless you really need to — having a huge list of animations
+      // persisted can cause a memory leak
+      //anim.persist()
+
+      // onremove allows you to run an event handler that fires when the animation
+      // was removed (i.e. put into an active replace state)
+      anim.onremove = function() {
+        console.log('Animation removed');
+      }
+
+      // replaceState allows you to query an element to see what its replace state is
+      // It will be active by default, or persisted if persist() was invoked
+      console.log(anim.replaceState);
+    });
 
   </script>
 </body>