From 80b1b4454026b540f72a1c5e13070662e95f7ea4 Mon Sep 17 00:00:00 2001
From: Beka Westberg <bwestberg@google.com>
Date: Wed, 9 Aug 2023 12:46:09 -0700
Subject: [PATCH] fix: connect animation persisting (#7365)

* fix: connect animation

* chore: format
---
 core/block_animations.ts | 49 ++++++++++++++++++++++++----------------
 1 file changed, 29 insertions(+), 20 deletions(-)

diff --git a/core/block_animations.ts b/core/block_animations.ts
index 7e0ec7b74..833c1c4e5 100644
--- a/core/block_animations.ts
+++ b/core/block_animations.ts
@@ -122,27 +122,36 @@ export function connectionUiEffect(block: BlockSvg) {
     },
     workspace.getParentSvg(),
   );
-  // Start the animation.
-  connectionUiStep(ripple, new Date(), scale);
-}
 
-/**
- * Expand a ripple around a connection.
- *
- * @param ripple Element to animate.
- * @param start Date of animation's start.
- * @param scale Scale of workspace.
- */
-function connectionUiStep(ripple: SVGElement, start: Date, scale: number) {
-  const ms = new Date().getTime() - start.getTime();
-  const percent = ms / 150;
-  if (percent > 1) {
-    dom.removeNode(ripple);
-  } else {
-    ripple.setAttribute('r', String(percent * 25 * scale));
-    ripple.style.opacity = String(1 - percent);
-    disconnectPid = setTimeout(connectionUiStep, 10, ripple, start, scale);
-  }
+  const scaleAnimation = dom.createSvgElement(
+    Svg.ANIMATE,
+    {
+      'id': 'animationCircle',
+      'begin': 'indefinite',
+      'attributeName': 'r',
+      'dur': '150ms',
+      'from': 0,
+      'to': 25 * scale,
+    },
+    ripple,
+  );
+  const opacityAnimation = dom.createSvgElement(
+    Svg.ANIMATE,
+    {
+      'id': 'animationOpacity',
+      'begin': 'indefinite',
+      'attributeName': 'opacity',
+      'dur': '150ms',
+      'from': 1,
+      'to': 0,
+    },
+    ripple,
+  );
+
+  scaleAnimation.beginElement();
+  opacityAnimation.beginElement();
+
+  setTimeout(() => void dom.removeNode(ripple), 150);
 }
 
 /**