first commit

lib/animate.ts

@@ -0,0 +1,74 @@
+export function animateChildren(
+  container: Element,
+  duration: number = 300,
+  easing: string = "ease-out",
+) {
+  interface ItemInfo {
+    element: Element;
+
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  }
+
+  function getItemInfos(container: Element): ItemInfo[] {
+    return Array.from(container.children).map((item) => {
+      const rect = item.getBoundingClientRect();
+      return {
+        element: item,
+        x: rect.left,
+        y: rect.top,
+        width: rect.width,
+        height: rect.height,
+      };
+    });
+  }
+
+  function animateItems(oldItems: ItemInfo[], newItems: ItemInfo[]) {
+    for (const newItem of newItems) {
+      if (newItem.element.className.includes("ignore-animate")) {
+        continue;
+      }
+
+      let oldItem = oldItems.find((e) => e.element == newItem.element);
+      if (!oldItem) {
+        oldItem = {
+          element: newItem.element,
+          x: newItem.x,
+          y: newItem.y,
+          height: newItem.height / 1.5,
+          width: newItem.width / 1.5,
+        };
+      }
+
+      const translateX = oldItem.x - newItem.x;
+      const translateY = oldItem.y - newItem.y;
+      const scaleX = oldItem.width / newItem.width;
+      const scaleY = oldItem.height / newItem.height;
+      newItem.element.animate(
+        [
+          {
+            transform: `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`,
+          },
+          { transform: "none" },
+        ],
+        { duration: duration, easing: easing },
+      );
+    }
+  }
+
+  let oldItemInfos = getItemInfos(container);
+  const observer = new MutationObserver(function (
+    mutations: MutationRecord[],
+    observer: MutationObserver,
+  ) {
+    const newItemInfos = getItemInfos(container);
+    if (oldItemInfos) {
+      animateItems(oldItemInfos, newItemInfos);
+    }
+    oldItemInfos = newItemInfos;
+  });
+  observer.observe(container, { childList: true });
+  return observer;
+}