src/enhance/motion.ts

Functions

Imports

It imports src/enhance/marks.ts. Imported by src/enhance/chart.ts.

Source

1/** Motion: the entrance and update animations, both skipped under `prefers-reduced-motion`. */
2
3import { MARK, shape } from "./marks.js";
4
5const DURATION = 450;
6const ANIMATED = ["x", "y", "width", "height", "cx", "cy", "r", "x1", "x2", "y1", "y2"] as const;
7
8export const reducedMotion = (): boolean =>
9  typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
10
11/** Each mark's geometry by key, taken before an update so the new marks can grow from it. */
12export function geometry(figure: HTMLElement): Map<string, Record<string, string>> {
13  const before = new Map<string, Record<string, string>>();
14  for (const mark of figure.querySelectorAll(MARK)) {
15    const attrs: Record<string, string> = {};
16    for (const name of ANIMATED) {
17      const value = shape(mark).getAttribute(name);
18      if (value !== null) attrs[name] = value;
19    }
20    before.set(mark.getAttribute("data-enarratio-key") ?? "", attrs);
21  }
22  return before;
23}
24
25/**
26 * Animates the figure's marks from their geometry `before` an update to their new one. Marks that
27 * share a key tween; new marks fade in.
28 */
29export function animateFrom(
30  figure: HTMLElement,
31  before: Map<string, Record<string, string>>,
32): void {
33  const tweens: { mark: Element; name: string; from: number; to: number }[] = [];
34  for (const mark of figure.querySelectorAll(MARK)) {
35    const old = before.get(mark.getAttribute("data-enarratio-key") ?? "");
36    if (!old) {
37      mark.animate?.([{ opacity: 0 }, { opacity: 1 }], {
38        duration: DURATION,
39        easing: "ease-out",
40      });
41      continue;
42    }
43    const el = shape(mark);
44    for (const name of ANIMATED) {
45      const from = Number(old[name]);
46      const to = Number(el.getAttribute(name));
47      if (Number.isFinite(from) && Number.isFinite(to) && from !== to) {
48        tweens.push({ mark: el, name, from, to });
49        el.setAttribute(name, String(from));
50      }
51    }
52  }
53  const started = performance.now();
54  const frame = (now: number): void => {
55    const t = Math.min(1, (now - started) / DURATION);
56    const eased = 1 - (1 - t) ** 3;
57    for (const { mark, name, from, to } of tweens) {
58      mark.setAttribute(name, String(from + (to - from) * eased));
59    }
60    if (t < 1) requestAnimationFrame(frame);
61  };
62  if (tweens.length > 0) requestAnimationFrame(frame);
63}