@studiometa/js-toolkit 2.0.1 → 2.2.0-alpha.1

package/decorators/withScrolledInView.js

@@ -5,12 +5,13 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import withMountWhenInView from "./withMountWhenInView.js";
-import { damp, clamp, clamp01 } from "../utils/index.js";
-function withScrolledInView(BaseClass, options) {
+import { damp, clamp, clamp01, getOffsetSizes, isFunction, useScheduler } from "../utils/index.js";
+const scheduler = useScheduler(["update", "render"]);
+function withScrolledInView(BaseClass, options = {}) {
   var _a;
   return _a = class extends withMountWhenInView(BaseClass, options) {
-    constructor() {
-      super(...arguments);
+    constructor(element) {
+      super(element);
       __publicField(this, "__props", {
         start: {
           x: 0,
@@ -35,37 +36,79 @@ function withScrolledInView(BaseClass, options) {
       });
       __publicField(this, "dampFactor", 0.1);
       __publicField(this, "dampPrecision", 1e-3);
+      const delegate = {
+        handleEvent(event) {
+          delegate[event.type](event.detail[0]);
+        },
+        resized: () => {
+          this.__setProps();
+        },
+        scrolled: (props) => {
+          if (!this.$services.has("ticked") && props.changed.y || props.changed.x) {
+            this.$services.enable("ticked");
+          }
+        },
+        ticked: () => {
+          this.__props.current.x = clamp(window.pageXOffset, this.__props.start.x, this.__props.end.x);
+          this.__props.progress.x = clamp01((this.__props.current.x - this.__props.start.x) / (this.__props.end.x - this.__props.start.x));
+          this.__props.dampedProgress.x = damp(this.__props.progress.x, this.__props.dampedProgress.x, this.dampFactor, this.dampPrecision);
+          this.__props.current.y = clamp(window.pageYOffset, this.__props.start.y, this.__props.end.y);
+          this.__props.progress.y = clamp01((this.__props.current.y - this.__props.start.y) / (this.__props.end.y - this.__props.start.y));
+          this.__props.dampedProgress.y = damp(this.__props.progress.y, this.__props.dampedProgress.y, this.dampFactor, this.dampPrecision);
+          if (this.__props.dampedProgress.x === this.__props.progress.x && this.__props.dampedProgress.y === this.__props.progress.y) {
+            this.$services.disable("ticked");
+          }
+          scheduler.update(() => {
+            const renderFn = this.__callMethod("scrolledInView", this.__props);
+            if (isFunction(renderFn)) {
+              scheduler.render(() => {
+                renderFn(this.__props);
+              });
+            }
+          });
+        }
+      };
+      this.$on("before-mounted", () => {
+        this.$on("resized", delegate);
+        this.$on("scrolled", delegate);
+        this.$on("ticked", delegate);
+      });
+      this.$on("mounted", () => {
+        this.__setProps();
+      });
+      this.$on("destroyed", () => {
+        this.$off("resized", delegate);
+        this.$off("scrolled", delegate);
+        this.$off("ticked", delegate);
+      });
     }
     mounted() {
-      this.__setProps();
+      if (isFunction(super.mounted))
+        super.mounted();
     }
-    resized() {
-      this.__setProps();
+    resized(props) {
+      if (isFunction(super.resized))
+        super.resized(props);
     }
     scrolled(props) {
-      if (!this.$services.has("ticked") && props.changed.y || props.changed.x) {
-        this.$services.enable("ticked");
-      }
+      if (isFunction(super.scrolled))
+        super.scrolled(props);
+    }
+    ticked(props) {
+      if (isFunction(super.ticked))
+        super.ticked(props);
     }
-    ticked() {
-      this.__props.current.x = clamp(window.pageXOffset, this.__props.start.x, this.__props.end.x);
-      this.__props.progress.x = clamp01((this.__props.current.x - this.__props.start.x) / (this.__props.end.x - this.__props.start.x));
-      this.__props.dampedProgress.x = damp(this.__props.progress.x, this.__props.dampedProgress.x, this.dampFactor, this.dampPrecision);
-      this.__props.current.y = clamp(window.pageYOffset, this.__props.start.y, this.__props.end.y);
-      this.__props.progress.y = clamp01((this.__props.current.y - this.__props.start.y) / (this.__props.end.y - this.__props.start.y));
-      this.__props.dampedProgress.y = damp(this.__props.progress.y, this.__props.dampedProgress.y, this.dampFactor, this.dampPrecision);
-      if (this.__props.dampedProgress.x === this.__props.progress.x && this.__props.dampedProgress.y === this.__props.progress.y) {
-        this.$services.disable("ticked");
-      }
-      this.__callMethod("scrolledInView", this.__props);
+    destroyed() {
+      if (isFunction(super.destroyed))
+        super.destroyed();
     }
     __setProps() {
-      const sizes = this.$el.getBoundingClientRect();
-      const yEnd = sizes.top + window.pageYOffset + sizes.height;
+      const sizes = options.useOffsetSizes ? getOffsetSizes(this.$el) : this.$el.getBoundingClientRect();
+      const yEnd = sizes.y + window.pageYOffset + sizes.height;
       const yStart = yEnd - window.innerHeight - sizes.height;
       const yCurrent = clamp(window.pageYOffset, yStart, yEnd);
       const yProgress = clamp01((yCurrent - yStart) / (yEnd - yStart));
-      const xEnd = sizes.left + window.pageXOffset + sizes.width;
+      const xEnd = sizes.x + window.pageXOffset + sizes.width;
       const xStart = xEnd - window.innerWidth - sizes.width;
       const xCurrent = clamp(window.pageXOffset, xStart, xEnd);
       const xProgress = clamp01((xCurrent - xStart) / (xEnd - xStart));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit",
-  "version": "2.0.1",
+  "version": "2.2.0-alpha.1",
   "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
   "publishConfig": {
     "access": "public"
@@ -39,6 +39,7 @@
     "toolkit"
   ],
   "dependencies": {
+    "@motionone/easing": "^10.8.0",
     "deepmerge": "^4.2.2"
   }
 }

package/services/Service.cjs

@@ -29,9 +29,9 @@ __export(Service_exports, {
 module.exports = __toCommonJS(Service_exports);
 var Service = class {
   constructor() {
+    __publicField(this, "callbacks", /* @__PURE__ */ new Map());
+    __publicField(this, "isInit", false);
     __publicField(this, "props");
-    this.callbacks = /* @__PURE__ */ new Map();
-    this.isInit = false;
   }
   updateProps(...args) {
     this.props = args;

package/services/Service.d.ts

@@ -2,7 +2,15 @@
  * Service abstract class
  */
 export default class Service {
-    callbacks: Map<any, any>;
+    /**
+     * Map containing the callbacks.
+     * @type {Map<string, Function>}
+     */
+    callbacks: Map<string, Function>;
+    /**
+     * State flag.
+     * @type {boolean}
+     */
     isInit: boolean;
     /**
      * @type {unknown}

package/services/Service.js

@@ -6,9 +6,9 @@ var __publicField = (obj, key, value) => {
 };
 class Service {
   constructor() {
+    __publicField(this, "callbacks", /* @__PURE__ */ new Map());
+    __publicField(this, "isInit", false);
     __publicField(this, "props");
-    this.callbacks = /* @__PURE__ */ new Map();
-    this.isInit = false;
   }
   updateProps(...args) {
     this.props = args;

package/services/raf.cjs

@@ -32,6 +32,9 @@ __export(raf_exports, {
 module.exports = __toCommonJS(raf_exports);
 var import_Service = __toESM(require("./Service.cjs"), 1);
 var import_nextFrame = require("../utils/nextFrame.cjs");
+var import_scheduler = require("../utils/scheduler.cjs");
+var import_isFunction = __toESM(require("../utils/isFunction.cjs"), 1);
+var scheduler = (0, import_scheduler.useScheduler)(["update", "render"]);
 var Raf = class extends import_Service.default {
   constructor() {
     super(...arguments);
@@ -63,6 +66,19 @@ var Raf = class extends import_Service.default {
     this.props.time = window.performance.now();
     return this.props;
   }
+  trigger(...args) {
+    this.callbacks.forEach(function forEachCallback(callback) {
+      scheduler.update(function rafUpdate() {
+        const render = callback(...args);
+        if ((0, import_isFunction.default)(render)) {
+          scheduler.render(function rafRender() {
+            render(...args);
+          });
+        }
+      });
+    });
+    return this;
+  }
 };
 var instance;
 var raf;

package/services/raf.js

@@ -6,6 +6,9 @@ var __publicField = (obj, key, value) => {
 };
 import Service from "./Service.js";
 import { getRaf, getCancelRaf } from "../utils/nextFrame.js";
+import { useScheduler } from "../utils/scheduler.js";
+import isFunction from "../utils/isFunction.js";
+const scheduler = useScheduler(["update", "render"]);
 class Raf extends Service {
   constructor() {
     super(...arguments);
@@ -37,6 +40,19 @@ class Raf extends Service {
     this.props.time = window.performance.now();
     return this.props;
   }
+  trigger(...args) {
+    this.callbacks.forEach(function forEachCallback(callback) {
+      scheduler.update(function rafUpdate() {
+        const render = callback(...args);
+        if (isFunction(render)) {
+          scheduler.render(function rafRender() {
+            render(...args);
+          });
+        }
+      });
+    });
+    return this;
+  }
 }
 let instance;
 let raf;

package/utils/css/animate.cjs

@@ -0,0 +1,207 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/utils/css/animate.js
+var animate_exports = {};
+__export(animate_exports, {
+  animate: () => animate
+});
+module.exports = __toCommonJS(animate_exports);
+var import_easing = require("@motionone/easing");
+var import_math = require("../math/index.cjs");
+var import_isDefined = __toESM(require("../isDefined.cjs"), 1);
+var import_transform = __toESM(require("./transform.cjs"), 1);
+var import_raf = __toESM(require("../../services/raf.cjs"), 1);
+var import_scheduler = require("../scheduler.cjs");
+var id = 0;
+var running = /* @__PURE__ */ new WeakMap();
+var raf = (0, import_raf.default)();
+var noop = () => {
+};
+var PROGRESS_PRECISION = 1e-4;
+var CSSUnitConverter = {
+  "%": (value, getSizeRef) => value * getSizeRef() / 100,
+  vh: (value) => value * window.innerHeight / 100,
+  vw: (value) => value * window.innerWidth / 100,
+  vmin: (value) => value * Math.min(window.innerWidth, window.innerHeight) / 100,
+  vmax: (value) => value * Math.max(window.innerWidth, window.innerHeight) / 100
+};
+function getAnimationStepValue(val, getSizeRef) {
+  if (typeof val === "number") {
+    return val;
+  }
+  if (!val[1] || !CSSUnitConverter[val[1]]) {
+    return val[0];
+  }
+  return CSSUnitConverter[val[1]](val[0], getSizeRef);
+}
+function linear(value) {
+  return value;
+}
+function normalizeEase(ease) {
+  if (!(0, import_isDefined.default)(ease)) {
+    return linear;
+  }
+  if (Array.isArray(ease)) {
+    return (0, import_easing.cubicBezier)(...ease);
+  }
+  return ease;
+}
+var generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) => (0, import_math.lerp)(getAnimationStepValue(fromValue != null ? fromValue : 0, () => element[sizeRef]), getAnimationStepValue(toValue != null ? toValue : 0, () => element[sizeRef]), progress);
+var widthBasedTranslateRenderStrategy = generateTranslateRenderStrategy("offsetWidth");
+var heightBasedTranslateRenderStrategy = generateTranslateRenderStrategy("offsetHeight");
+var generateLerpRenderStrategy = (defaultValue) => (element, fromValue, toValue, progress) => (0, import_math.lerp)(fromValue != null ? fromValue : defaultValue, toValue != null ? toValue : defaultValue, progress);
+var scaleRenderStrategy = generateLerpRenderStrategy(1);
+var degreesRenderStrategy = generateLerpRenderStrategy(0);
+var transformRenderStrategies = {
+  x: widthBasedTranslateRenderStrategy,
+  y: heightBasedTranslateRenderStrategy,
+  z: widthBasedTranslateRenderStrategy,
+  scale: scaleRenderStrategy,
+  scaleX: scaleRenderStrategy,
+  scaleY: scaleRenderStrategy,
+  scaleZ: scaleRenderStrategy,
+  skew: degreesRenderStrategy,
+  skewX: degreesRenderStrategy,
+  skewY: degreesRenderStrategy,
+  rotate: degreesRenderStrategy,
+  rotateX: degreesRenderStrategy,
+  rotateY: degreesRenderStrategy,
+  rotateZ: degreesRenderStrategy
+};
+function render(element, from, to, progress) {
+  const stepProgress = to.easing((0, import_math.map)(progress, from.offset, to.offset, 0, 1));
+  import_scheduler.domScheduler.read(function renderRead() {
+    var _a, _b;
+    let opacity = false;
+    if ((0, import_isDefined.default)(from.opacity) || (0, import_isDefined.default)(to.opacity)) {
+      opacity = (0, import_math.map)(stepProgress, 0, 1, (_a = from.opacity) != null ? _a : 1, (_b = to.opacity) != null ? _b : 1);
+    } else if (element.style.opacity) {
+      opacity = "";
+    }
+    let transformOrigin = false;
+    if ((0, import_isDefined.default)(to.transformOrigin)) {
+      transformOrigin = to.transformOrigin;
+    } else if (element.style.transformOrigin) {
+      transformOrigin = "";
+    }
+    const props = Object.fromEntries(import_transform.TRANSFORM_PROPS.filter((name) => (0, import_isDefined.default)(from[name]) || (0, import_isDefined.default)(to[name])).map((name) => {
+      return [name, transformRenderStrategies[name](element, from[name], to[name], stepProgress)];
+    }));
+    import_scheduler.domScheduler.write(function renderWrite() {
+      if (opacity !== false) {
+        element.style.opacity = opacity;
+      }
+      if (transformOrigin !== false) {
+        element.style.transformOrigin = transformOrigin;
+      }
+      (0, import_transform.default)(element, props);
+    });
+  });
+}
+function animate(element, keyframes, options = {}) {
+  var _a;
+  let progressValue = 0;
+  let easedProgress = 0;
+  if (!running.has(element)) {
+    running.set(element, /* @__PURE__ */ new Map());
+  }
+  const ease = normalizeEase(options.easing);
+  let duration = (_a = options.duration) != null ? _a : 1;
+  duration *= 1e3;
+  let startTime = performance.now();
+  let endTime = startTime + duration;
+  const key = `animate-${id}`;
+  id += 1;
+  const { onProgress = noop, onFinish = noop } = options;
+  let isRunning = false;
+  const keyframesCount = keyframes.length - 1;
+  const normalizedKeyframes = keyframes.map((keyframe, index) => {
+    var _a2;
+    return {
+      ...keyframe,
+      offset: (_a2 = keyframe.offset) != null ? _a2 : index / keyframesCount,
+      easing: normalizeEase(keyframe.easing)
+    };
+  });
+  function pause() {
+    isRunning = false;
+    raf.remove(key);
+  }
+  function progress(newProgress) {
+    if (typeof newProgress === "undefined") {
+      return progressValue;
+    }
+    progressValue = newProgress;
+    if (Math.abs(1 - progressValue) < PROGRESS_PRECISION) {
+      progressValue = 1;
+      pause();
+      import_scheduler.domScheduler.afterWrite(() => onFinish(progressValue, easedProgress));
+    }
+    easedProgress = ease(progressValue);
+    let toIndex = 0;
+    while (normalizedKeyframes[toIndex] && normalizedKeyframes[toIndex].offset <= easedProgress && normalizedKeyframes[toIndex].offset !== 1) {
+      toIndex += 1;
+    }
+    render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], easedProgress);
+    onProgress(progressValue, easedProgress);
+    return progressValue;
+  }
+  function tick(props) {
+    if (!isRunning) {
+      raf.remove(key);
+      return;
+    }
+    progress((0, import_math.clamp01)((0, import_math.map)(props.time, startTime, endTime, 0, 1)));
+  }
+  function start() {
+    const runningKeys = running.get(element);
+    runningKeys.forEach((runningPause, runningKey) => {
+      runningPause();
+      runningKeys.delete(runningKey);
+    });
+    runningKeys.set(key, pause);
+    running.set(element, runningKeys);
+    startTime = performance.now();
+    endTime = startTime + duration;
+    progressValue = 0;
+    easedProgress = 0;
+    isRunning = true;
+    raf.add(key, tick);
+  }
+  function play() {
+    if (isRunning) {
+      return;
+    }
+    startTime = performance.now() - (0, import_math.lerp)(0, duration, progressValue);
+    endTime = startTime + duration;
+    isRunning = true;
+    raf.add(key, tick);
+  }
+  return {
+    start,
+    finish: () => progress(1),
+    pause,
+    play,
+    progress
+  };
+}
+if (module.exports.default) module.exports = module.exports.default;

package/utils/css/animate.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @typedef {import('./transform.js').TransformProps} TransformProps
+ * @typedef {import('../math/ease.js').EasingFunction} EasingFn
+ * @typedef {[number, number, number, number]} BezierCurve
+ * @typedef {{
+ *   duration?: number;
+ *   easing?: EasingFn|BezierCurve;
+ *   onProgress?: (progress: number, easedProgress: number) => void;
+ *   onFinish?: (progress: number, easedProgress: number) => void;
+ *  }} Options
+ * @typedef {TransformProps & {
+ *   opacity?: number;
+ *   transformOrigin?: string;
+ *   easing?: EasingFn|BezierCurve;
+ *   offset?: number;
+ * }} Keyframe
+ * @typedef {Keyframe & {
+ *   easing: EasingFn;
+ *   offset: number;
+ * }} NormalizedKeyframe
+ * @typedef {{
+ *   start: () => void;
+ *   pause: () => void;
+ *   play: () => void;
+ *   finish: () => void;
+ *   progress: (value: number?) => number
+ * }} Animate
+ */
+/**
+ * Animate an element.
+ * @param   {HTMLElement} element
+ * @param   {Keyframe[]} keyframes
+ * @param   {Options} options
+ * @returns {Animate}
+ */
+export function animate(element: HTMLElement, keyframes: Keyframe[], options?: Options): Animate;
+export type TransformProps = import('./transform.js').TransformProps;
+export type EasingFn = import('../math/ease.js').EasingFunction;
+export type BezierCurve = [number, number, number, number];
+export type Options = Options;
+export type Keyframe = TransformProps & {
+    opacity?: number;
+    transformOrigin?: string;
+    easing?: EasingFn | [number, number, number, number];
+    offset?: number;
+};
+export type NormalizedKeyframe = Keyframe & {
+    easing: EasingFn;
+    offset: number;
+};
+export type Animate = {
+    start: () => void;
+    pause: () => void;
+    play: () => void;
+    finish: () => void;
+    progress: (value: number | null) => number;
+};

package/utils/css/animate.js

@@ -0,0 +1,182 @@
+import { cubicBezier } from "@motionone/easing";
+import { lerp, map, clamp01 } from "../math/index.js";
+import isDefined from "../isDefined.js";
+import transform, { TRANSFORM_PROPS } from "./transform.js";
+import useRaf from "../../services/raf.js";
+import { domScheduler as scheduler } from "../scheduler.js";
+let id = 0;
+const running = /* @__PURE__ */ new WeakMap();
+const raf = useRaf();
+const noop = () => {
+};
+const PROGRESS_PRECISION = 1e-4;
+const CSSUnitConverter = {
+  "%": (value, getSizeRef) => value * getSizeRef() / 100,
+  vh: (value) => value * window.innerHeight / 100,
+  vw: (value) => value * window.innerWidth / 100,
+  vmin: (value) => value * Math.min(window.innerWidth, window.innerHeight) / 100,
+  vmax: (value) => value * Math.max(window.innerWidth, window.innerHeight) / 100
+};
+function getAnimationStepValue(val, getSizeRef) {
+  if (typeof val === "number") {
+    return val;
+  }
+  if (!val[1] || !CSSUnitConverter[val[1]]) {
+    return val[0];
+  }
+  return CSSUnitConverter[val[1]](val[0], getSizeRef);
+}
+function linear(value) {
+  return value;
+}
+function normalizeEase(ease) {
+  if (!isDefined(ease)) {
+    return linear;
+  }
+  if (Array.isArray(ease)) {
+    return cubicBezier(...ease);
+  }
+  return ease;
+}
+const generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) => lerp(getAnimationStepValue(fromValue != null ? fromValue : 0, () => element[sizeRef]), getAnimationStepValue(toValue != null ? toValue : 0, () => element[sizeRef]), progress);
+const widthBasedTranslateRenderStrategy = generateTranslateRenderStrategy("offsetWidth");
+const heightBasedTranslateRenderStrategy = generateTranslateRenderStrategy("offsetHeight");
+const generateLerpRenderStrategy = (defaultValue) => (element, fromValue, toValue, progress) => lerp(fromValue != null ? fromValue : defaultValue, toValue != null ? toValue : defaultValue, progress);
+const scaleRenderStrategy = generateLerpRenderStrategy(1);
+const degreesRenderStrategy = generateLerpRenderStrategy(0);
+const transformRenderStrategies = {
+  x: widthBasedTranslateRenderStrategy,
+  y: heightBasedTranslateRenderStrategy,
+  z: widthBasedTranslateRenderStrategy,
+  scale: scaleRenderStrategy,
+  scaleX: scaleRenderStrategy,
+  scaleY: scaleRenderStrategy,
+  scaleZ: scaleRenderStrategy,
+  skew: degreesRenderStrategy,
+  skewX: degreesRenderStrategy,
+  skewY: degreesRenderStrategy,
+  rotate: degreesRenderStrategy,
+  rotateX: degreesRenderStrategy,
+  rotateY: degreesRenderStrategy,
+  rotateZ: degreesRenderStrategy
+};
+function render(element, from, to, progress) {
+  const stepProgress = to.easing(map(progress, from.offset, to.offset, 0, 1));
+  scheduler.read(function renderRead() {
+    var _a, _b;
+    let opacity = false;
+    if (isDefined(from.opacity) || isDefined(to.opacity)) {
+      opacity = map(stepProgress, 0, 1, (_a = from.opacity) != null ? _a : 1, (_b = to.opacity) != null ? _b : 1);
+    } else if (element.style.opacity) {
+      opacity = "";
+    }
+    let transformOrigin = false;
+    if (isDefined(to.transformOrigin)) {
+      transformOrigin = to.transformOrigin;
+    } else if (element.style.transformOrigin) {
+      transformOrigin = "";
+    }
+    const props = Object.fromEntries(TRANSFORM_PROPS.filter((name) => isDefined(from[name]) || isDefined(to[name])).map((name) => {
+      return [name, transformRenderStrategies[name](element, from[name], to[name], stepProgress)];
+    }));
+    scheduler.write(function renderWrite() {
+      if (opacity !== false) {
+        element.style.opacity = opacity;
+      }
+      if (transformOrigin !== false) {
+        element.style.transformOrigin = transformOrigin;
+      }
+      transform(element, props);
+    });
+  });
+}
+function animate(element, keyframes, options = {}) {
+  var _a;
+  let progressValue = 0;
+  let easedProgress = 0;
+  if (!running.has(element)) {
+    running.set(element, /* @__PURE__ */ new Map());
+  }
+  const ease = normalizeEase(options.easing);
+  let duration = (_a = options.duration) != null ? _a : 1;
+  duration *= 1e3;
+  let startTime = performance.now();
+  let endTime = startTime + duration;
+  const key = `animate-${id}`;
+  id += 1;
+  const { onProgress = noop, onFinish = noop } = options;
+  let isRunning = false;
+  const keyframesCount = keyframes.length - 1;
+  const normalizedKeyframes = keyframes.map((keyframe, index) => {
+    var _a2;
+    return {
+      ...keyframe,
+      offset: (_a2 = keyframe.offset) != null ? _a2 : index / keyframesCount,
+      easing: normalizeEase(keyframe.easing)
+    };
+  });
+  function pause() {
+    isRunning = false;
+    raf.remove(key);
+  }
+  function progress(newProgress) {
+    if (typeof newProgress === "undefined") {
+      return progressValue;
+    }
+    progressValue = newProgress;
+    if (Math.abs(1 - progressValue) < PROGRESS_PRECISION) {
+      progressValue = 1;
+      pause();
+      scheduler.afterWrite(() => onFinish(progressValue, easedProgress));
+    }
+    easedProgress = ease(progressValue);
+    let toIndex = 0;
+    while (normalizedKeyframes[toIndex] && normalizedKeyframes[toIndex].offset <= easedProgress && normalizedKeyframes[toIndex].offset !== 1) {
+      toIndex += 1;
+    }
+    render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], easedProgress);
+    onProgress(progressValue, easedProgress);
+    return progressValue;
+  }
+  function tick(props) {
+    if (!isRunning) {
+      raf.remove(key);
+      return;
+    }
+    progress(clamp01(map(props.time, startTime, endTime, 0, 1)));
+  }
+  function start() {
+    const runningKeys = running.get(element);
+    runningKeys.forEach((runningPause, runningKey) => {
+      runningPause();
+      runningKeys.delete(runningKey);
+    });
+    runningKeys.set(key, pause);
+    running.set(element, runningKeys);
+    startTime = performance.now();
+    endTime = startTime + duration;
+    progressValue = 0;
+    easedProgress = 0;
+    isRunning = true;
+    raf.add(key, tick);
+  }
+  function play() {
+    if (isRunning) {
+      return;
+    }
+    startTime = performance.now() - lerp(0, duration, progressValue);
+    endTime = startTime + duration;
+    isRunning = true;
+    raf.add(key, tick);
+  }
+  return {
+    start,
+    finish: () => progress(1),
+    pause,
+    play,
+    progress
+  };
+}
+export {
+  animate
+};