From 6fa66aae54f297a46a2c9887c055b54447d12078 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 1 Apr 2024 12:47:09 +0100
Subject: [PATCH] use animation time isntead of id

---
 packages/bbui/src/Form/Core/Picker.svelte |  2 +-
 packages/bbui/src/Tooltip/Context.svelte  | 16 +++++++++-------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index d389abe60a..fa0325e690 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -129,7 +129,7 @@
       } else {
         console.log("not long enough");
       }
-    }, 400)
+    }, 200)
   }
 
   const handleMouseleave = (e, option) => {
diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index d543eb0081..bd99db61f0 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -9,7 +9,7 @@
   let targetX = 0
   let targetY = 0
 
-  let animationId = 0;
+  let animationStartTime = 0;
 
   let x = 0;
   let y = 0;
@@ -31,7 +31,7 @@
 
     targetX = rect.x - tooltipWidth
     targetY = rect.y
-    animationId += 1
+    animationStartTime = document.timeline.currentTime
 
     if (x === 0 && y === 0) {
       x = targetX
@@ -39,14 +39,16 @@
     }
   }
 
-  const animate = (invokedAnimationId, xRate = null, yRate = null) => {
-    if (invokedAnimationId !== animationId) {
-      console.log("CANCEL ANIMATION ", invokedAnimationId, " ", animationId);
+  const animate = (invokedAnimationStartTime, frameTime, xRate = null, yRate = null) => {
+    console.log(frameTime);
+    if (invokedAnimationStartTime !== animationStartTime) {
+      console.log("CANCEL ANIMATION ", invokedAnimationStartTime, " ", animationStartTime);
       return;
     }
     console.log("animating");
 
     const animationDurationInFrames = 10;
+    const easingRate = 2;
 
     const xDelta = targetX - x
     const yDelta = targetY - y
@@ -84,12 +86,12 @@
       y = y - yRate;
     }
 
-    requestAnimationFrame(() => animate(invokedAnimationId, xRate, yRate))
+    requestAnimationFrame((newFrameTime) => animate(invokedAnimationStartTime, newFrameTime, xRate, yRate))
   }
 
   $: updatePosition(anchor, tooltip)
   $: updatePositionOnVisibilityChange(visible, hovering)
-  $: requestAnimationFrame(() => animate(animationId))
+  $: requestAnimationFrame((frameTime) => animate(animationStartTime, frameTime, null, null))
 
   const handleMouseenter = (e) => {
     hovering = true;