@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/src/motion/liquid.ts

@@ -0,0 +1,227 @@
+import { gsap } from '../core/gsap';
+import { bezier, channels, easeOut, eased, spring } from '../core/channels';
+import { TIMING } from '../core/timing';
+import { transparentColor } from './surface';
+
+/*
+ * Stepbro's liquid modal (ported from Kayro): the opener's colour melts into the
+ * surface. Two blobs (one on the opener, one with the surface's shape) sit under
+ * a "goo" filter (blur 20, alpha threshold 19·a − 9), so while the surface's
+ * blob swings out of the opener on a spring (144/14, kick 2400 px/s) they
+ * stretch and merge like a liquid; the content zooms in from twice its size.
+ * Each property runs on its own channel, as in the source.
+ */
+
+const GOO = 'mk-liquid-goo';
+
+/** The goo filter, added to the page once. */
+function ensureGoo() {
+  if (document.getElementById(GOO)) return;
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('aria-hidden', 'true');
+  svg.setAttribute('width', '0');
+  svg.setAttribute('height', '0');
+  svg.style.position = 'absolute';
+  svg.innerHTML = `<defs><filter id="${GOO}" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur in="SourceGraphic" stdDeviation="20"/><feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"/></filter></defs>`;
+  document.body.append(svg);
+}
+
+interface Box {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}
+
+/** A layer under the surface's content, in viewport coordinates, holding the blobs. */
+function gooLayer(surface: HTMLElement) {
+  ensureGoo();
+  const box = surface.getBoundingClientRect();
+  const layer = document.createElement('div');
+  layer.className = 'mk-morph-face mk-liquid';
+  layer.setAttribute('aria-hidden', 'true');
+  Object.assign(layer.style, {
+    position: 'absolute',
+    left: `${-box.left - surface.clientLeft}px`,
+    top: `${-box.top - surface.clientTop}px`,
+    width: `${innerWidth}px`,
+    height: `${innerHeight}px`,
+    zIndex: '-1',
+    pointerEvents: 'none',
+    filter: `url(#${GOO})`,
+    borderRadius: '0',
+    background: 'none',
+  });
+  const blob = (from: Box, radius: number, color: string) => {
+    const element = document.createElement('div');
+    Object.assign(element.style, {
+      position: 'absolute',
+      top: `${from.top}px`,
+      left: `${from.left}px`,
+      width: `${from.width}px`,
+      height: `${from.height}px`,
+      borderRadius: `${radius}px`,
+      background: color,
+    });
+    layer.append(element);
+    return element;
+  };
+  surface.append(layer);
+  return { layer, blob };
+}
+
+/** The surface turns into a frame while its blob is the visible shape. */
+function hideFrame(surface: HTMLElement) {
+  const saved = surface.getAttribute('style');
+  Object.assign(surface.style, {
+    transition: 'none',
+    background: 'transparent',
+    boxShadow: 'none',
+    borderColor: 'transparent',
+    overflow: 'visible',
+  });
+  return () => {
+    if (saved === null) surface.removeAttribute('style');
+    else surface.setAttribute('style', saved);
+  };
+}
+
+const radiusOf = (element: HTMLElement, box: DOMRect) =>
+  Math.min(parseFloat(getComputedStyle(element).borderTopLeftRadius) || 0, box.width / 2, box.height / 2);
+
+/** Content parts move and zoom about the surface's centre. */
+function centerParts(surface: HTMLElement, parts: HTMLElement[]) {
+  const box = surface.getBoundingClientRect();
+  const centerX = box.left + box.width / 2;
+  const centerY = box.top + box.height / 2;
+  for (const part of parts) {
+    const own = part.getBoundingClientRect();
+    gsap.set(part, { transformOrigin: `${centerX - own.left}px ${centerY - own.top}px` });
+  }
+  return { centerX, centerY };
+}
+
+type Frame = { top: number; left: number; width: number; height: number; scale: number; blur: number };
+
+/** Open `surface` out of `origin` the liquid way. Returns a function that stops it and settles the surface. */
+export function liquidOpen(surface: HTMLElement, origin: HTMLElement, parts: HTMLElement[]) {
+  const box = surface.getBoundingClientRect();
+  const start = origin.getBoundingClientRect();
+  const surfaceColor = getComputedStyle(surface).backgroundColor;
+  const originLook = getComputedStyle(origin).backgroundColor;
+  const originColor = transparentColor(originLook) ? surfaceColor : originLook;
+  const endRadius = radiusOf(surface, box);
+  const startRadius = radiusOf(origin, start);
+  const { centerX, centerY } = centerParts(surface, parts);
+  const restore = hideFrame(surface);
+  const { layer, blob } = gooLayer(surface);
+  const originBlob = blob(start, startRadius, originColor);
+  const shape = blob(start, startRadius, originColor);
+  const towardX = start.left + start.width / 2 < innerWidth / 2 ? 1 : -1;
+  const towardY = start.top + start.height / 2 < innerHeight / 2 ? 1 : -1;
+  if (parts.length) gsap.set(parts, { opacity: 0 });
+  const current: Frame = { top: start.top, left: start.left, width: start.width, height: start.height, scale: 2, blur: 8 };
+  const paint = () => {
+    if (!parts.length) return;
+    gsap.set(parts, {
+      x: current.left + current.width / 2 - centerX,
+      y: current.top + current.height / 2 - centerY,
+      scale: current.scale,
+      filter: `blur(${current.blur}px)`,
+    });
+  };
+  const motion = channels({ ...current, radius: startRadius }, (name, value) => {
+    if (name === 'radius') shape.style.borderRadius = `${value}px`;
+    else {
+      current[name] = value;
+      if (name === 'top' || name === 'left' || name === 'width' || name === 'height') shape.style[name] = `${value}px`;
+      paint();
+    }
+  });
+  const L = TIMING.liquid;
+  void motion.animate(
+    { top: box.top, left: box.left, width: box.width, height: box.height, radius: endRadius, scale: 1, blur: 0 },
+    {
+      top: spring(144, 14, { velocity: 2400, direction: towardY }),
+      left: spring(144, 14, { velocity: 2400, direction: towardX }),
+      width: eased(L.size, bezier(0.8, 0.3, 0.5, 0.8)),
+      height: eased(L.size, bezier(0.8, 0.3, 0.5, 0.8)),
+      radius: eased(L.radius, easeOut),
+      scale: eased(L.content, easeOut),
+      blur: eased(L.content, easeOut),
+    },
+  );
+  gsap.to(shape, { background: surfaceColor, duration: L.color, delay: L.colorDelay, ease: 'power2.out' });
+  if (parts.length) gsap.to(parts, { opacity: 1, duration: L.color, delay: L.colorDelay, ease: 'power2.out' });
+  gsap.to(originBlob, { opacity: 0, duration: L.ghost, delay: L.ghostDelay, ease: 'power2.out' });
+  let done = false;
+  const finish = () => {
+    if (done) return;
+    done = true;
+    motion.stop();
+    clearTimeout(timer);
+    layer.remove();
+    restore();
+    if (parts.length) gsap.set(parts, { clearProps: 'opacity,transform,transformOrigin,filter' });
+  };
+  // The springs settle well within the source's 1.1 s window.
+  const timer = setTimeout(finish, L.safetyMs);
+  return finish;
+}
+
+/** Close `surface` back into `origin` the liquid way, then call `onComplete`. */
+export function liquidClose(surface: HTMLElement, origin: HTMLElement, parts: HTMLElement[], onComplete: () => void) {
+  const box = surface.getBoundingClientRect();
+  const end = origin.getBoundingClientRect();
+  const surfaceColor = getComputedStyle(surface).backgroundColor;
+  const originLook = getComputedStyle(origin).backgroundColor;
+  const originColor = transparentColor(originLook) ? surfaceColor : originLook;
+  const startRadius = radiusOf(surface, box);
+  const endRadius = radiusOf(origin, end);
+  const { centerX, centerY } = centerParts(surface, parts);
+  hideFrame(surface);
+  const { blob } = gooLayer(surface);
+  const originBlob = blob(end, endRadius, originColor);
+  originBlob.style.opacity = '0';
+  const shape = blob(box, startRadius, surfaceColor);
+  const current: Frame = { top: box.top, left: box.left, width: box.width, height: box.height, scale: 1, blur: 0 };
+  const motion = channels({ ...current, radius: startRadius, opacity: 1 }, (name, value) => {
+    if (name === 'radius') shape.style.borderRadius = `${value}px`;
+    else if (name === 'opacity') {
+      if (parts.length) gsap.set(parts, { opacity: value });
+    } else {
+      current[name] = value;
+      if (name === 'top' || name === 'left' || name === 'width' || name === 'height') shape.style[name] = `${value}px`;
+      if (parts.length) {
+        gsap.set(parts, {
+          x: current.left + current.width / 2 - centerX,
+          y: current.top + current.height / 2 - centerY,
+          scale: current.scale,
+          filter: `blur(${current.blur}px)`,
+        });
+      }
+    }
+  });
+  const L = TIMING.liquid;
+  void motion.animate(
+    { top: end.top, left: end.left, width: end.width, height: end.height, radius: endRadius, scale: 2, blur: 8, opacity: 0 },
+    {
+      top: spring(130, 18),
+      left: spring(130, 18),
+      width: eased(L.closeSize, easeOut),
+      height: eased(L.closeSize, easeOut),
+      // It rounds into the opener's shape early, long before it arrives.
+      radius: eased(L.closeSize, easeOut),
+      scale: eased(L.closeContent, easeOut),
+      blur: eased(L.closeContent, easeOut),
+      opacity: spring(137, 20),
+    },
+  );
+  gsap.to(originBlob, { opacity: 1, duration: L.originRestore, delay: 0.15, ease: 'power2.in' });
+  gsap.to(shape, { background: originColor, duration: L.originRestore, ease: 'power2.out' });
+  gsap.to(surface, { opacity: 0, duration: TIMING.dialog.close, ease: 'power3.in' });
+  setTimeout(() => {
+    motion.stop();
+    onComplete();
+  }, L.safetyMs);
+}