chore: pane animation fixes

packages/web/src/javascripts/Components/Panes/PaneAnimator.tsx

@@ -3,6 +3,13 @@ import { log, LoggingDomain } from '@/Logging'
 const ENTRANCE_DURATION = 200
 const EXIT_DURATION = 200
 
+function cancelExistingAnimations(element: HTMLElement): void {
+  element.getAnimations().forEach((animation) => {
+    animation.commitStyles()
+    animation.cancel()
+  })
+}
+
 export async function animatePaneEntranceTransitionFromOffscreenToTheRight(elementId: string): Promise<void> {
   log(LoggingDomain.Panes, 'Animating pane entrance transition from offscreen to the right', elementId)
   const element = document.getElementById(elementId)
@@ -10,6 +17,8 @@ export async function animatePaneEntranceTransitionFromOffscreenToTheRight(eleme
     return
   }
 
+  cancelExistingAnimations(element)
+
   const animation = element.animate(
     [
       {
@@ -27,6 +36,8 @@ export async function animatePaneEntranceTransitionFromOffscreenToTheRight(eleme
   )
 
   await animation.finished
+  animation.commitStyles()
+  animation.cancel()
 
   performSafariAnimationFix(element)
 }
@@ -38,6 +49,8 @@ export async function animatePaneExitTransitionOffscreenToTheRight(elementId: st
     return
   }
 
+  cancelExistingAnimations(element)
+
   const animation = element.animate(
     [
       {
@@ -52,6 +65,10 @@ export async function animatePaneExitTransitionOffscreenToTheRight(elementId: st
   )
 
   await animation.finished
+  animation.commitStyles()
+  animation.cancel()
+
+  performSafariAnimationFix(element)
 }
 
 /**