BottomSheet: first attempt for animation

src/material/BottomSheet.module.css

@@ -30,4 +30,9 @@
       max-height: 100%;
     }
   }
+
+  &.animated {
+    position: absolute;
+    transform: none;
+  }
 }

src/material/BottomSheet.tsx

@@ -1,25 +1,88 @@
-import { createEffect, type ParentComponent } from "solid-js";
+import {
+  createEffect,
+  createRenderEffect,
+  onCleanup,
+  onMount,
+  type ParentComponent,
+} from "solid-js";
 import styles from "./BottomSheet.module.css";
+import { useHeroSignal } from "../platform/anim";
 
 export type BottomSheetProps = {
   open?: boolean;
 };
 
+export const HERO = Symbol("BottomSheet Hero Symbol");
+
+function composeAnimationFrame({
+  top,
+  left,
+  height,
+  width,
+}: Record<"top" | "left" | "height" | "width", number>) {
+  return {
+    top: `${top}px`,
+    left: `${left}px`,
+    height: `${height}px`,
+    width: `${width}px`,
+  };
+}
+
+const MOVE_SPEED = 1400; // 1400px/s, bottom sheet is big and a bit heavier than small papers
+
 const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   let element: HTMLDialogElement;
+  let animation: Animation | undefined;
+  const hero = useHeroSignal(HERO);
 
   createEffect(() => {
     if (props.open) {
       if (!element.open) {
         element.showModal();
+        animateOpen();
       }
     } else {
       if (element.open) {
+        if (animation) {
+          animation.cancel();
+        }
         element.close();
       }
     }
   });
 
+  const animateOpen = () => {
+    // Do hero animation
+    const startRect = hero();
+    console.debug("capture hero source", startRect);
+    if (!startRect) return;
+    const endRect = element.getBoundingClientRect();
+    const easing = "ease-in-out";
+    console.debug("easing", easing);
+    element.classList.add(styles.animated);
+    const distance = Math.sqrt(
+      Math.pow(Math.abs(startRect.top - endRect.top), 2) +
+        Math.pow(Math.abs(startRect.left - startRect.top), 2),
+    );
+    const duration = (distance / MOVE_SPEED) * 1000;
+    animation = element.animate(
+      [composeAnimationFrame(startRect), composeAnimationFrame(endRect)],
+      { easing, duration },
+    );
+    const onAnimationEnd = () => {
+      element.classList.remove(styles.animated);
+      animation = undefined;
+    };
+    animation.addEventListener("finish", onAnimationEnd);
+    animation.addEventListener("cancel", onAnimationEnd);
+  };
+
+  onCleanup(() => {
+    if (animation) {
+      animation.cancel();
+    }
+  });
+
   return (
     <dialog class={styles.bottomSheet} ref={element!}>
       {props.children}