@studiometa/js-toolkit 2.0.1 → 2.1.0

package/decorators/withScrolledInView.js

@@ -5,12 +5,12 @@ 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 } from "../utils/index.js";
+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 +35,72 @@ 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");
+          }
+          this.__callMethod("scrolledInView", 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.1.0",
   "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/utils/css/animate.cjs

@@ -0,0 +1,190 @@
+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 id = 0;
+var running = /* @__PURE__ */ new WeakMap();
+var noop = () => {
+};
+var PROGRESS_PRECISION = 1e-4;
+var CSSUnitConverter = {
+  "%": (value, sizeRef) => value * sizeRef / 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, sizeRef) {
+  if (typeof val === "number") {
+    return val;
+  }
+  if (!val[1] || !CSSUnitConverter[val[1]]) {
+    return val[0];
+  }
+  return CSSUnitConverter[val[1]](val[0], sizeRef);
+}
+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) {
+  var _a, _b;
+  const stepProgress = to.easing((0, import_math.map)(progress, from.offset, to.offset, 0, 1));
+  if ((0, import_isDefined.default)(from.opacity) || (0, import_isDefined.default)(to.opacity)) {
+    element.style.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) {
+    element.style.opacity = "";
+  }
+  if ((0, import_isDefined.default)(to.transformOrigin)) {
+    element.style.transformOrigin = to.transformOrigin;
+  } else if (element.style.transformOrigin) {
+    element.style.transformOrigin = "";
+  }
+  (0, import_transform.default)(element, 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)];
+  })));
+}
+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;
+  }
+  function progress(newProgress) {
+    if (typeof newProgress === "undefined") {
+      return progressValue;
+    }
+    progressValue = newProgress;
+    if (Math.abs(1 - progressValue) < PROGRESS_PRECISION) {
+      progressValue = 1;
+      pause();
+      requestAnimationFrame(() => 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(time) {
+    if (!isRunning) {
+      return;
+    }
+    progress((0, import_math.clamp01)((0, import_math.map)(time, startTime, endTime, 0, 1)));
+    requestAnimationFrame(tick);
+  }
+  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;
+    requestAnimationFrame(tick);
+  }
+  function play() {
+    if (isRunning) {
+      return;
+    }
+    startTime = performance.now() - (0, import_math.lerp)(0, duration, progressValue);
+    endTime = startTime + duration;
+    isRunning = true;
+    requestAnimationFrame(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,165 @@
+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";
+let id = 0;
+const running = /* @__PURE__ */ new WeakMap();
+const noop = () => {
+};
+const PROGRESS_PRECISION = 1e-4;
+const CSSUnitConverter = {
+  "%": (value, sizeRef) => value * sizeRef / 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, sizeRef) {
+  if (typeof val === "number") {
+    return val;
+  }
+  if (!val[1] || !CSSUnitConverter[val[1]]) {
+    return val[0];
+  }
+  return CSSUnitConverter[val[1]](val[0], sizeRef);
+}
+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) {
+  var _a, _b;
+  const stepProgress = to.easing(map(progress, from.offset, to.offset, 0, 1));
+  if (isDefined(from.opacity) || isDefined(to.opacity)) {
+    element.style.opacity = map(stepProgress, 0, 1, (_a = from.opacity) != null ? _a : 1, (_b = to.opacity) != null ? _b : 1);
+  } else if (element.style.opacity) {
+    element.style.opacity = "";
+  }
+  if (isDefined(to.transformOrigin)) {
+    element.style.transformOrigin = to.transformOrigin;
+  } else if (element.style.transformOrigin) {
+    element.style.transformOrigin = "";
+  }
+  transform(element, Object.fromEntries(TRANSFORM_PROPS.filter((name) => isDefined(from[name]) || isDefined(to[name])).map((name) => {
+    return [name, transformRenderStrategies[name](element, from[name], to[name], stepProgress)];
+  })));
+}
+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;
+  }
+  function progress(newProgress) {
+    if (typeof newProgress === "undefined") {
+      return progressValue;
+    }
+    progressValue = newProgress;
+    if (Math.abs(1 - progressValue) < PROGRESS_PRECISION) {
+      progressValue = 1;
+      pause();
+      requestAnimationFrame(() => 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(time) {
+    if (!isRunning) {
+      return;
+    }
+    progress(clamp01(map(time, startTime, endTime, 0, 1)));
+    requestAnimationFrame(tick);
+  }
+  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;
+    requestAnimationFrame(tick);
+  }
+  function play() {
+    if (isRunning) {
+      return;
+    }
+    startTime = performance.now() - lerp(0, duration, progressValue);
+    endTime = startTime + duration;
+    isRunning = true;
+    requestAnimationFrame(tick);
+  }
+  return {
+    start,
+    finish: () => progress(1),
+    pause,
+    play,
+    progress
+  };
+}
+export {
+  animate
+};

package/utils/css/getOffsetSizes.cjs

@@ -0,0 +1,47 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/utils/css/getOffsetSizes.js
+var getOffsetSizes_exports = {};
+__export(getOffsetSizes_exports, {
+  default: () => getOffsetSizes
+});
+module.exports = __toCommonJS(getOffsetSizes_exports);
+function getOffsetSizes(element) {
+  let parent = element;
+  let x = -window.pageXOffset;
+  let y = -window.pageYOffset;
+  while (parent) {
+    x += parent.offsetLeft;
+    y += parent.offsetTop;
+    parent = parent.offsetParent;
+  }
+  const width = element.offsetWidth;
+  const height = element.offsetWidth;
+  return {
+    x,
+    y,
+    width,
+    height,
+    top: y,
+    right: width + x,
+    bottom: height + y,
+    left: x
+  };
+}
+if (module.exports.default) module.exports = module.exports.default;

package/utils/css/getOffsetSizes.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Get a `DOMRect` like `Object` for an element, without its transforms.
+ * @param   {HTMLElement} element
+ * @returns {{ x: number, y: number, width: number, height: number, top: number, right: number, bottom: number, left: number }}
+ */
+export default function getOffsetSizes(element: HTMLElement): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};

package/utils/css/getOffsetSizes.js

@@ -0,0 +1,25 @@
+function getOffsetSizes(element) {
+  let parent = element;
+  let x = -window.pageXOffset;
+  let y = -window.pageYOffset;
+  while (parent) {
+    x += parent.offsetLeft;
+    y += parent.offsetTop;
+    parent = parent.offsetParent;
+  }
+  const width = element.offsetWidth;
+  const height = element.offsetWidth;
+  return {
+    x,
+    y,
+    width,
+    height,
+    top: y,
+    right: width + x,
+    bottom: height + y,
+    left: x
+  };
+}
+export {
+  getOffsetSizes as default
+};

package/utils/css/index.cjs

@@ -16,6 +16,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 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);
 
@@ -24,15 +25,20 @@ var css_exports = {};
 __export(css_exports, {
   addClass: () => import_classes.add,
   addStyle: () => import_styles.add,
+  getOffsetSizes: () => import_getOffsetSizes.default,
   matrix: () => import_matrix.default,
   removeClass: () => import_classes.remove,
   removeStyle: () => import_styles.remove,
   toggleClass: () => import_classes.toggle,
+  transform: () => import_transform.default,
   transition: () => import_transition.default
 });
 module.exports = __toCommonJS(css_exports);
+__reExport(css_exports, require("./animate.cjs"), module.exports);
 var import_classes = require("./classes.cjs");
 var import_styles = require("./styles.cjs");
+var import_getOffsetSizes = __toESM(require("./getOffsetSizes.cjs"), 1);
 var import_matrix = __toESM(require("./matrix.cjs"), 1);
+var import_transform = __toESM(require("./transform.cjs"), 1);
 var import_transition = __toESM(require("./transition.cjs"), 1);
 if (module.exports.default) module.exports = module.exports.default;

package/utils/css/index.d.ts

@@ -1,4 +1,7 @@
+export * from "./animate.js";
+export { default as getOffsetSizes } from "./getOffsetSizes.js";
 export { default as matrix } from "./matrix.js";
+export { default as transform } from "./transform.js";
 export { default as transition } from "./transition.js";
 export { add as addClass, remove as removeClass, toggle as toggleClass } from "./classes.js";
 export { add as addStyle, remove as removeStyle } from "./styles.js";