@studiometa/js-toolkit 2.4.7 → 2.6.0

package/decorators/withResponsiveOptions.cjs

@@ -1,8 +1,6 @@
-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)
@@ -16,10 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   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/decorators/withResponsiveOptions.ts
@@ -28,13 +22,13 @@ __export(withResponsiveOptions_exports, {
   withResponsiveOptions: () => withResponsiveOptions
 });
 module.exports = __toCommonJS(withResponsiveOptions_exports);
-var import_ResponsiveOptionsManager = __toESM(require("../Base/managers/ResponsiveOptionsManager.cjs"), 1);
+var import_ResponsiveOptionsManager = require("../Base/managers/ResponsiveOptionsManager.cjs");
 function withResponsiveOptions(BaseClass) {
   class WithResponsiveOptions extends BaseClass {
     get __managers() {
       return {
         ...super.__managers,
-        OptionsManager: import_ResponsiveOptionsManager.default
+        OptionsManager: import_ResponsiveOptionsManager.ResponsiveOptionsManager
       };
     }
   }

package/decorators/withResponsiveOptions.js

@@ -1,4 +1,4 @@
-import ResponsiveOptionsManager from "../Base/managers/ResponsiveOptionsManager.js";
+import { ResponsiveOptionsManager } from "../Base/managers/ResponsiveOptionsManager.js";
 function withResponsiveOptions(BaseClass) {
   class WithResponsiveOptions extends BaseClass {
     get __managers() {

package/helpers/getClosestParent.cjs

@@ -0,0 +1,48 @@
+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/helpers/getClosestParent.ts
+var getClosestParent_exports = {};
+__export(getClosestParent_exports, {
+  default: () => getClosestParent
+});
+module.exports = __toCommonJS(getClosestParent_exports);
+var import_getInstanceFromElement = __toESM(require("./getInstanceFromElement.cjs"), 1);
+function walkAncestorsWhile(element, condition, limit = 1e3) {
+  let parent = element.parentElement;
+  let count = 0;
+  while (parent && condition(parent) && count < limit) {
+    parent = parent.parentElement;
+    count += 1;
+  }
+  return parent;
+}
+function getClosestParent(childInstance, ParentConstructor) {
+  const parentEl = walkAncestorsWhile(
+    childInstance.$el,
+    (element) => !(0, import_getInstanceFromElement.default)(element, ParentConstructor)
+  );
+  return parentEl ? (0, import_getInstanceFromElement.default)(parentEl, ParentConstructor) : null;
+}
+if (module.exports.default) module.exports = module.exports.default;

package/helpers/getClosestParent.d.ts

@@ -0,0 +1,5 @@
+import type { Base, BaseConstructor } from '../Base/index.js';
+/**
+ * Get the closest parent of a component.
+ */
+export default function getClosestParent<T extends BaseConstructor>(childInstance: Base, ParentConstructor: T): InstanceType<T>;

package/helpers/getClosestParent.js

@@ -0,0 +1,20 @@
+import getInstanceFromElement from "./getInstanceFromElement.js";
+function walkAncestorsWhile(element, condition, limit = 1e3) {
+  let parent = element.parentElement;
+  let count = 0;
+  while (parent && condition(parent) && count < limit) {
+    parent = parent.parentElement;
+    count += 1;
+  }
+  return parent;
+}
+function getClosestParent(childInstance, ParentConstructor) {
+  const parentEl = walkAncestorsWhile(
+    childInstance.$el,
+    (element) => !getInstanceFromElement(element, ParentConstructor)
+  );
+  return parentEl ? getInstanceFromElement(parentEl, ParentConstructor) : null;
+}
+export {
+  getClosestParent as default
+};

package/helpers/index.cjs

@@ -27,14 +27,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var helpers_exports = {};
 __export(helpers_exports, {
   createApp: () => import_createApp.default,
+  getClosestParent: () => import_getClosestParent.default,
   getInstanceFromElement: () => import_getInstanceFromElement.default,
   importOnInteraction: () => import_importOnInteraction.default,
   importWhenIdle: () => import_importWhenIdle.default,
   importWhenVisible: () => import_importWhenVisible.default
 });
 module.exports = __toCommonJS(helpers_exports);
-var import_createApp = __toESM(require("./createApp.cjs"), 1);
 __reExport(helpers_exports, require("./getDirectChildren.cjs"), module.exports);
+var import_createApp = __toESM(require("./createApp.cjs"), 1);
+var import_getClosestParent = __toESM(require("./getClosestParent.cjs"), 1);
 var import_getInstanceFromElement = __toESM(require("./getInstanceFromElement.cjs"), 1);
 var import_importOnInteraction = __toESM(require("./importOnInteraction.cjs"), 1);
 var import_importWhenIdle = __toESM(require("./importWhenIdle.cjs"), 1);

package/helpers/index.d.ts

@@ -1,5 +1,6 @@
-export { default as createApp } from './createApp.js';
 export * from './getDirectChildren.js';
+export { default as createApp } from './createApp.js';
+export { default as getClosestParent } from './getClosestParent.js';
 export { default as getInstanceFromElement } from './getInstanceFromElement.js';
 export { default as importOnInteraction } from './importOnInteraction.js';
 export { default as importWhenIdle } from './importWhenIdle.js';

package/helpers/index.js

@@ -1,13 +1,15 @@
-import { default as default2 } from "./createApp.js";
 export * from "./getDirectChildren.js";
-import { default as default3 } from "./getInstanceFromElement.js";
-import { default as default4 } from "./importOnInteraction.js";
-import { default as default5 } from "./importWhenIdle.js";
-import { default as default6 } from "./importWhenVisible.js";
+import { default as default2 } from "./createApp.js";
+import { default as default3 } from "./getClosestParent.js";
+import { default as default4 } from "./getInstanceFromElement.js";
+import { default as default5 } from "./importOnInteraction.js";
+import { default as default6 } from "./importWhenIdle.js";
+import { default as default7 } from "./importWhenVisible.js";
 export {
   default2 as createApp,
-  default3 as getInstanceFromElement,
-  default4 as importOnInteraction,
-  default5 as importWhenIdle,
-  default6 as importWhenVisible
+  default3 as getClosestParent,
+  default4 as getInstanceFromElement,
+  default5 as importOnInteraction,
+  default6 as importWhenIdle,
+  default7 as importWhenVisible
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit",
-  "version": "2.4.7",
+  "version": "2.6.0",
   "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
   "publishConfig": {
     "access": "public"

package/services/drag.cjs

@@ -29,9 +29,9 @@ __export(drag_exports, {
 });
 module.exports = __toCommonJS(drag_exports);
 var import_service = require("./service.cjs");
-var import_pointer = __toESM(require("./pointer.cjs"), 1);
 var import_raf = __toESM(require("./raf.cjs"), 1);
 var import_inertiaFinalValue = __toESM(require("../utils/math/inertiaFinalValue.cjs"), 1);
+var import_utils = require("../utils/index.cjs");
 var MODES = {
   START: "start",
   DRAG: "drag",
@@ -40,13 +40,26 @@ var MODES = {
   STOP: "stop"
 };
 var count = 0;
+var events = ["pointerdown", "pointerup"];
+var passiveEventOptions = { passive: true };
+function getEventPosition(event) {
+  const eventOrTouch = (0, import_utils.isDefined)(event.touches) ? event.touches[0] : event;
+  return {
+    x: eventOrTouch.clientX,
+    y: eventOrTouch.clientY
+  };
+}
 function createDragService(target, { dampFactor = 0.85, dragTreshold = 10 } = {}) {
   count += 1;
   const id = `drag-${count}`;
+  let previousEvent;
   function shouldPreventClick() {
     return Math.abs(props.distance.x) > dragTreshold || Math.abs(props.distance.y) > dragTreshold;
   }
   function start(x, y) {
+    if (props.isGrabbing) {
+      return;
+    }
     props.x = x;
     props.y = y;
     props.origin.x = x;
@@ -60,8 +73,12 @@ function createDragService(target, { dampFactor = 0.85, dragTreshold = 10 } = {}
     props.mode = MODES.START;
     props.isGrabbing = true;
     trigger(props);
+    document.addEventListener("touchmove", handleEvent, passiveEventOptions);
+    document.addEventListener("mousemove", handleEvent, passiveEventOptions);
   }
   function drop() {
+    document.removeEventListener("touchmove", handleEvent);
+    document.removeEventListener("mousemove", handleEvent);
     props.isGrabbing = false;
     props.mode = MODES.DROP;
     props.hasInertia = true;
@@ -76,6 +93,7 @@ function createDragService(target, { dampFactor = 0.85, dragTreshold = 10 } = {}
   }
   function stop() {
     (0, import_raf.default)().remove(id);
+    props.isGrabbing = false;
     props.hasInertia = false;
     props.mode = MODES.STOP;
     trigger(props);
@@ -97,41 +115,51 @@ function createDragService(target, { dampFactor = 0.85, dragTreshold = 10 } = {}
       }
     }
   }
-  function pointerHandler(pointerProps) {
+  function drag(event) {
     if (props.isGrabbing) {
-      props.x = pointerProps.x;
-      props.y = pointerProps.y;
-      props.delta.x = pointerProps.delta.x;
-      props.delta.y = pointerProps.delta.y;
-      props.final.x = pointerProps.x;
-      props.final.y = pointerProps.y;
+      const position = getEventPosition(event);
+      props.x = position.x;
+      props.y = position.y;
+      if (previousEvent) {
+        const previousPosition = getEventPosition(previousEvent);
+        props.delta.x = position.x - previousPosition.x;
+        props.delta.y = position.y - previousPosition.y;
+      }
+      props.final.x = position.x;
+      props.final.y = position.y;
       props.distance.x = props.x - props.origin.x;
       props.distance.y = props.y - props.origin.y;
       if (props.mode !== MODES.DRAG) {
         props.mode = MODES.DRAG;
       }
       trigger(props);
-      if (!pointerProps.isDown) {
-        drop();
-      }
+      previousEvent = event;
     }
   }
   function handleEvent(event) {
-    if (event.type === "dragstart") {
-      event.preventDefault();
-      return;
-    }
-    if (event.type === "click") {
-      if (shouldPreventClick()) {
-        event.stopImmediatePropagation();
-        event.stopPropagation();
+    switch (event.type) {
+      case "dragstart":
         event.preventDefault();
-      }
-      return;
+        break;
+      case "click":
+        if (shouldPreventClick()) {
+          event.stopImmediatePropagation();
+          event.stopPropagation();
+          event.preventDefault();
+        }
+        break;
+      case "pointerup":
+        drop();
+        break;
+      case "touchmove":
+      case "mousemove":
+        drag(event);
+        break;
+      default:
+        if (event.button === 0) {
+          start(event.x, event.y);
+        }
     }
-    const x = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
-    const y = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
-    start(x, y);
   }
   const { add, remove, has, trigger, props } = (0, import_service.useService)({
     props: {
@@ -159,21 +187,18 @@ function createDragService(target, { dampFactor = 0.85, dragTreshold = 10 } = {}
       }
     },
     init() {
-      const options = { passive: true };
-      props.target.addEventListener("mousedown", handleEvent, options);
-      props.target.addEventListener("touchstart", handleEvent, options);
-      props.target.addEventListener("dragstart", handleEvent, { capture: true });
-      props.target.addEventListener("click", handleEvent, { capture: true });
-      const pointer = (0, import_pointer.default)();
-      pointer.add(id, pointerHandler);
+      events.forEach((event) => {
+        target.addEventListener(event, handleEvent, passiveEventOptions);
+      });
+      target.addEventListener("dragstart", handleEvent, { capture: true });
+      target.addEventListener("click", handleEvent, { capture: true });
     },
     kill() {
-      props.target.removeEventListener("mousedown", handleEvent);
-      props.target.removeEventListener("touchstart", handleEvent);
-      props.target.removeEventListener("dragstart", handleEvent);
-      props.target.removeEventListener("click", handleEvent);
-      const pointer = (0, import_pointer.default)();
-      pointer.remove(id);
+      events.forEach((event) => {
+        target.removeEventListener(event, handleEvent);
+      });
+      target.removeEventListener("dragstart", handleEvent);
+      target.removeEventListener("click", handleEvent);
     }
   });
   return {

package/services/drag.js

@@ -1,7 +1,7 @@
 import { useService } from "./service.js";
-import usePointer from "./pointer.js";
 import useRaf from "./raf.js";
 import inertiaFinalValue from "../utils/math/inertiaFinalValue.js";
+import { isDefined } from "../utils/index.js";
 const MODES = {
   START: "start",
   DRAG: "drag",
@@ -10,13 +10,26 @@ const MODES = {
   STOP: "stop"
 };
 let count = 0;
+const events = ["pointerdown", "pointerup"];
+const passiveEventOptions = { passive: true };
+function getEventPosition(event) {
+  const eventOrTouch = isDefined(event.touches) ? event.touches[0] : event;
+  return {
+    x: eventOrTouch.clientX,
+    y: eventOrTouch.clientY
+  };
+}
 function createDragService(target, { dampFactor = 0.85, dragTreshold = 10 } = {}) {
   count += 1;
   const id = `drag-${count}`;
+  let previousEvent;
   function shouldPreventClick() {
     return Math.abs(props.distance.x) > dragTreshold || Math.abs(props.distance.y) > dragTreshold;
   }
   function start(x, y) {
+    if (props.isGrabbing) {
+      return;
+    }
     props.x = x;
     props.y = y;
     props.origin.x = x;
@@ -30,8 +43,12 @@ function createDragService(target, { dampFactor = 0.85, dragTreshold = 10 } = {}
     props.mode = MODES.START;
     props.isGrabbing = true;
     trigger(props);
+    document.addEventListener("touchmove", handleEvent, passiveEventOptions);
+    document.addEventListener("mousemove", handleEvent, passiveEventOptions);
   }
   function drop() {
+    document.removeEventListener("touchmove", handleEvent);
+    document.removeEventListener("mousemove", handleEvent);
     props.isGrabbing = false;
     props.mode = MODES.DROP;
     props.hasInertia = true;
@@ -46,6 +63,7 @@ function createDragService(target, { dampFactor = 0.85, dragTreshold = 10 } = {}
   }
   function stop() {
     useRaf().remove(id);
+    props.isGrabbing = false;
     props.hasInertia = false;
     props.mode = MODES.STOP;
     trigger(props);
@@ -67,41 +85,51 @@ function createDragService(target, { dampFactor = 0.85, dragTreshold = 10 } = {}
       }
     }
   }
-  function pointerHandler(pointerProps) {
+  function drag(event) {
     if (props.isGrabbing) {
-      props.x = pointerProps.x;
-      props.y = pointerProps.y;
-      props.delta.x = pointerProps.delta.x;
-      props.delta.y = pointerProps.delta.y;
-      props.final.x = pointerProps.x;
-      props.final.y = pointerProps.y;
+      const position = getEventPosition(event);
+      props.x = position.x;
+      props.y = position.y;
+      if (previousEvent) {
+        const previousPosition = getEventPosition(previousEvent);
+        props.delta.x = position.x - previousPosition.x;
+        props.delta.y = position.y - previousPosition.y;
+      }
+      props.final.x = position.x;
+      props.final.y = position.y;
       props.distance.x = props.x - props.origin.x;
       props.distance.y = props.y - props.origin.y;
       if (props.mode !== MODES.DRAG) {
         props.mode = MODES.DRAG;
       }
       trigger(props);
-      if (!pointerProps.isDown) {
-        drop();
-      }
+      previousEvent = event;
     }
   }
   function handleEvent(event) {
-    if (event.type === "dragstart") {
-      event.preventDefault();
-      return;
-    }
-    if (event.type === "click") {
-      if (shouldPreventClick()) {
-        event.stopImmediatePropagation();
-        event.stopPropagation();
+    switch (event.type) {
+      case "dragstart":
         event.preventDefault();
-      }
-      return;
+        break;
+      case "click":
+        if (shouldPreventClick()) {
+          event.stopImmediatePropagation();
+          event.stopPropagation();
+          event.preventDefault();
+        }
+        break;
+      case "pointerup":
+        drop();
+        break;
+      case "touchmove":
+      case "mousemove":
+        drag(event);
+        break;
+      default:
+        if (event.button === 0) {
+          start(event.x, event.y);
+        }
     }
-    const x = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
-    const y = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
-    start(x, y);
   }
   const { add, remove, has, trigger, props } = useService({
     props: {
@@ -129,21 +157,18 @@ function createDragService(target, { dampFactor = 0.85, dragTreshold = 10 } = {}
       }
     },
     init() {
-      const options = { passive: true };
-      props.target.addEventListener("mousedown", handleEvent, options);
-      props.target.addEventListener("touchstart", handleEvent, options);
-      props.target.addEventListener("dragstart", handleEvent, { capture: true });
-      props.target.addEventListener("click", handleEvent, { capture: true });
-      const pointer = usePointer();
-      pointer.add(id, pointerHandler);
+      events.forEach((event) => {
+        target.addEventListener(event, handleEvent, passiveEventOptions);
+      });
+      target.addEventListener("dragstart", handleEvent, { capture: true });
+      target.addEventListener("click", handleEvent, { capture: true });
     },
     kill() {
-      props.target.removeEventListener("mousedown", handleEvent);
-      props.target.removeEventListener("touchstart", handleEvent);
-      props.target.removeEventListener("dragstart", handleEvent);
-      props.target.removeEventListener("click", handleEvent);
-      const pointer = usePointer();
-      pointer.remove(id);
+      events.forEach((event) => {
+        target.removeEventListener(event, handleEvent);
+      });
+      target.removeEventListener("dragstart", handleEvent);
+      target.removeEventListener("click", handleEvent);
     }
   });
   return {

package/utils/css/animate.cjs

@@ -33,6 +33,7 @@ var import_is = require("../is.cjs");
 var import_transform = __toESM(require("./transform.cjs"), 1);
 var import_scheduler = require("../scheduler.cjs");
 var import_tween = require("../tween.cjs");
+var import_utils = require("./utils.cjs");
 var id = 0;
 var running = /* @__PURE__ */ new WeakMap();
 var CSSUnitConverter = {
@@ -52,7 +53,10 @@ function getAnimationStepValue(val, getSizeRef) {
   return CSSUnitConverter[val[1]](val[0], getSizeRef);
 }
 var generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) => (0, import_math.lerp)(
-  getAnimationStepValue(fromValue != null ? fromValue : 0, () => element[sizeRef]),
+  getAnimationStepValue(
+    fromValue != null ? fromValue : 0,
+    () => element[sizeRef]
+  ),
   getAnimationStepValue(toValue != null ? toValue : 0, () => element[sizeRef]),
   progress
 );
@@ -109,7 +113,7 @@ function render(element, from, to, progress) {
     });
   });
 }
-function animate(element, keyframes, options = {}) {
+function singleAnimate(element, keyframes, options = {}) {
   const keyframesCount = keyframes.length - 1;
   const normalizedKeyframes = keyframes.map(
     (keyframe, index) => {
@@ -150,4 +154,27 @@ function animate(element, keyframes, options = {}) {
   });
   return controls;
 }
+function animate(elementOrElements, keyframes, options = {}) {
+  const controls = (0, import_utils.eachElements)(
+    elementOrElements,
+    (element) => singleAnimate(element, keyframes, options)
+  );
+  const delegate = (key) => {
+    return (...args) => {
+      if (key === "progress" && args.length === 0) {
+        return controls[0][key]();
+      }
+      controls.forEach((control) => {
+        control[key](...args);
+      });
+    };
+  };
+  return {
+    start: delegate("start"),
+    pause: delegate("pause"),
+    finish: delegate("finish"),
+    play: delegate("play"),
+    progress: delegate("progress")
+  };
+}
 if (module.exports.default) module.exports = module.exports.default;

package/utils/css/animate.d.ts

@@ -1,31 +1,11 @@
 /**
- * @typedef {import('./transform.js').TransformProps} TransformProps
- * @typedef {TransformProps & {
- *   opacity?: number;
- *   transformOrigin?: string;
- *   easing?: import('../math/createEases.js').EasingFunction|import('../tween.js').BezierCurve;
- *   offset?: number;
- * }} Keyframe
- * @typedef {Keyframe & {
- *   easing: import('../math/createEases.js').EasingFunction;
- *   offset: number;
- * }} NormalizedKeyframe
- * @typedef {{
- *   start: () => void;
- *   pause: () => void;
- *   play: () => void;
- *   finish: () => void;
- *   progress: (value: number?) => number
- * }} Animate
- */
-/**
- * Animate an element.
- * @param   {HTMLElement} element
+ * Animate one or more elements.
+ * @param   {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>} elementOrElements
  * @param   {Keyframe[]} keyframes
  * @param   {import('../tween.js').TweenOptions} [options]
  * @returns {Animate}
  */
-export function animate(element: HTMLElement, keyframes: Keyframe[], options?: import('../tween.js').TweenOptions): Animate;
+export function animate(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, keyframes: Keyframe[], options?: import('../tween.js').TweenOptions): Animate;
 export type TransformProps = import('./transform.js').TransformProps;
 export type Keyframe = TransformProps & {
     opacity?: number;
@@ -42,5 +22,5 @@ export type Animate = {
     pause: () => void;
     play: () => void;
     finish: () => void;
-    progress: (value: number | null) => number;
+    progress: (value?: number) => number;
 };

package/utils/css/animate.js

@@ -3,6 +3,7 @@ import { isDefined, isFunction, isNumber } from "../is.js";
 import transform, { TRANSFORM_PROPS } from "./transform.js";
 import { domScheduler as scheduler } from "../scheduler.js";
 import { tween, normalizeEase } from "../tween.js";
+import { eachElements } from "./utils.js";
 let id = 0;
 const running = /* @__PURE__ */ new WeakMap();
 const CSSUnitConverter = {
@@ -22,7 +23,10 @@ function getAnimationStepValue(val, getSizeRef) {
   return CSSUnitConverter[val[1]](val[0], getSizeRef);
 }
 const generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) => lerp(
-  getAnimationStepValue(fromValue != null ? fromValue : 0, () => element[sizeRef]),
+  getAnimationStepValue(
+    fromValue != null ? fromValue : 0,
+    () => element[sizeRef]
+  ),
   getAnimationStepValue(toValue != null ? toValue : 0, () => element[sizeRef]),
   progress
 );
@@ -79,7 +83,7 @@ function render(element, from, to, progress) {
     });
   });
 }
-function animate(element, keyframes, options = {}) {
+function singleAnimate(element, keyframes, options = {}) {
   const keyframesCount = keyframes.length - 1;
   const normalizedKeyframes = keyframes.map(
     (keyframe, index) => {
@@ -120,6 +124,29 @@ function animate(element, keyframes, options = {}) {
   });
   return controls;
 }
+function animate(elementOrElements, keyframes, options = {}) {
+  const controls = eachElements(
+    elementOrElements,
+    (element) => singleAnimate(element, keyframes, options)
+  );
+  const delegate = (key) => {
+    return (...args) => {
+      if (key === "progress" && args.length === 0) {
+        return controls[0][key]();
+      }
+      controls.forEach((control) => {
+        control[key](...args);
+      });
+    };
+  };
+  return {
+    start: delegate("start"),
+    pause: delegate("pause"),
+    finish: delegate("finish"),
+    play: delegate("play"),
+    progress: delegate("progress")
+  };
+}
 export {
   animate
 };