only animate explainer after opened

Author: g-harel

demo/content.ts

@@ -65,7 +65,7 @@ const calcFullDetails = (percentage: number, a: Point, b: Point) => {
     return {a0, a1, a2, a3, b0, b1, b2, c0, c1, d0};
 };
 
-addTitle(4, "What are vector graphics?");
+addTitle(4, "Vector graphics");
 
 addCanvas(
     1.3,
@@ -211,7 +211,7 @@ addCanvas(2, (ctx, width, height, animate) => {
         approximated instead.`;
 });
 
-addTitle(4, "How are blobs made?");
+addTitle(4, "Making a blob");
 
 addCanvas(
     1.3,
@@ -362,7 +362,7 @@ addCanvas(
     },
 );
 
-addTitle(4, "How are animated blobs interpolated?");
+addTitle(4, "Interpolating between blobs");
 
 addCanvas(2, (ctx, width, height, animate) => {
     const period = Math.PI * 1000;

demo/index.html

@@ -19,6 +19,8 @@
                 flex-direction: column;
                 align-items: center;
                 padding: 2rem 0;
+                user-select: none;
+                -moz-user-select: none;
             }
 
             header img {
@@ -34,8 +36,6 @@
                 padding: 0.5rem;
                 text-decoration: none;
                 text-transform: uppercase;
-                user-select: none;
-                -moz-user-select: none;
             }
 
             main {

demo/internal/layout.ts

@@ -38,9 +38,11 @@ if (!containerElement) throw "missing container";
 const howItWorksElement = document.querySelector(".how-it-works");
 if (!howItWorksElement) throw "missing container";
 
+let animating = false;
 const reveal = () => {
     containerElement.classList.add("open");
     howItWorksElement.classList.add("hidden");
+    animating = true;
     redraw();
 };
 howItWorksElement.addEventListener("click", reveal);
@@ -147,6 +149,8 @@ const redraw = () => {
 
                 // Cell-specific callback for providing an animation painter.
                 const animate = (painter: AnimationPainter) => {
+                    if (!animating) return;
+
                     const animationID = Math.random();
                     const startTime = Date.now();
                     cell.animationID = animationID;