refactor: use transform instead of requestAnimationFrame

1 files changed, 19 insertions, 36 deletions

diff --git a/src/shadow.js b/src/shadow.js
index dc83e74..c893b55 100644
--- a/src/shadow.js
+++ b/src/shadow.js
@@ -81,45 +81,28 @@ export default class Shadow {
 
   close() {
     this.isOpen = false;
-    this.animate(this.finalState, this.startingState);
+    this.element.style.transform = `matrix(1, 0, 0, 1, 0, 0)`;
+    setTimeout(() => {
+      this.destroyItself();
+    }, 300);
   }
 
   animate(starts, finals) {
-    // Set up the interval for smooth transition
-    const steps = 20; // Number of steps for smoothness
-    let step = 0;
-
-    // Using requestAnimationFrame for smoother animation
-    const frame = () => {
-      // Calculate the progress (from 0 to 1)
-      const progress = step / steps;
-
-      // Interpolate the current values based on progress
-      const currentTop = starts.top + (finals.top - starts.top) * progress;
-      const currentLeft = starts.left + (finals.left - starts.left) * progress;
-      const currentWidth = starts.width + (finals.width - starts.width) * progress;
-      const currentHeight = starts.height + (finals.height - starts.height) * progress;
-
-      // Update the element's style
-      this.element.style.top = `${currentTop}px`;
-      this.element.style.left = `${currentLeft}px`;
-      this.element.style.width = `${currentWidth}px`;
-      this.element.style.height = `${currentHeight}px`;
-
-      // Increase the step count
-      step++;
-
-      // Continue animating until we reach the final step
-      if (step <= steps) {
-        requestAnimationFrame(frame);
-      } else {
-        this.element.classList.toggle('open');
-        if (!this.isOpen) this.destroyItself();
-      }
-    };
-
-    // Start the animation
-    requestAnimationFrame(frame);
+    // Calculate scaling factors based on width and height interpolation
+    const scaleX = finals.width / starts.width;
+    const scaleY = finals.height / starts.height;
+
+    // Calculate the center of the starting and final positions
+    const startCenterX = starts.left + starts.width / 2;
+    const startCenterY = starts.top + starts.height / 2;
+    const finalCenterX = finals.left + finals.width / 2;
+    const finalCenterY = finals.top + finals.height / 2;
+
+    const translateX = finalCenterX - startCenterX;
+    const translateY = finalCenterY - startCenterY;
+
+    // Apply the transform with matrix (scale + translate)
+    this.element.style.transform = `matrix(${scaleX}, 0, 0, ${scaleY}, ${translateX}, ${translateY})`;
   }
 
   placeItself() {