adding key, mouse or tap activation to demo, to avoid hurting people …

…who suffer migraines when seeing such animation.
Aakashbhardwaj27 · May 11, 2020 · d7dd627 · d7dd627
1 parent 24622e2
commit d7dd627
Showing 1 changed file with 38 additions and 21 deletions.
diff --git a/web-animations-api/replace-indefinite-animations.html b/web-animations-api/replace-indefinite-animations.html
@@ -21,42 +21,59 @@
       border: 10px solid black;
       border-radius: 10px;
     }
+
+    p {
+      position: absolute;
+      width: 300px;
+      right: 10px;
+      bottom: 10px;
+    }
   </style>
 </head>
 
 <body>
+  <p>Click, tap, or press the space bar to start the animation (disabled by default to protect those who suffer migraines when experiencing such animations).</p>
   <div>
 
   </div>
 
   <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' }
-      );
+    document.addEventListener('keypress', function(e) {
+      if(e.key === ' ') {
+        startAnimation();
+      }
+    });
+    document.addEventListener('click', startAnimation);
+
+    function startAnimation() {
+      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();
+        // commitStyles() writes the end state of the animation to the animated
+        //element inside a style attribute
+        anim.commitStyles();
 
-      // If you explicitly 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()
+        // If you explicitly 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');
-      }
+        // 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);
-    });
+        // 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>