@studiometa/ui 0.2.3 → 0.2.6

package/atoms/Prefetch/PrefetchWhenOver.cjs

@@ -1,47 +1,24 @@
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+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);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
@@ -52,14 +29,15 @@ var PrefetchWhenOver_exports = {};
 __export(PrefetchWhenOver_exports, {
   default: () => PrefetchWhenOver
 });
+module.exports = __toCommonJS(PrefetchWhenOver_exports);
 var import_AbstractPrefetch = __toESM(require("./AbstractPrefetch.cjs"), 1);
 var PrefetchWhenOver = class extends import_AbstractPrefetch.default {
   onMouseenter() {
     this.prefetch(new URL(this.$el.href));
   }
 };
-__publicField(PrefetchWhenOver, "config", __spreadProps(__spreadValues({}, import_AbstractPrefetch.default.config), {
+__publicField(PrefetchWhenOver, "config", {
+  ...import_AbstractPrefetch.default.config,
   name: "PrefetchWhenOver"
-}));
-module.exports = __toCommonJS(PrefetchWhenOver_exports);
+});
 if (module.exports.default) module.exports = module.exports.default;

package/atoms/Prefetch/PrefetchWhenOver.d.ts

@@ -13,7 +13,7 @@ export default class PrefetchWhenOver extends AbstractPrefetch {
      * @this    {PrefetchWhenOverInterface}
      * @returns {void}
      */
-    onMouseenter(): void;
+    onMouseenter(this: PrefetchWhenOverInterface): void;
 }
 export type PrefetchWhenOverInterface = PrefetchWhenOver & {
     $el: HTMLAnchorElement;

package/atoms/Prefetch/PrefetchWhenOver.js

@@ -1,35 +1 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import AbstractPrefetch from "./AbstractPrefetch.js";
-class PrefetchWhenOver extends AbstractPrefetch {
-  onMouseenter() {
-    this.prefetch(new URL(this.$el.href));
-  }
-}
-__publicField(PrefetchWhenOver, "config", __spreadProps(__spreadValues({}, AbstractPrefetch.config), {
-  name: "PrefetchWhenOver"
-}));
-export {
-  PrefetchWhenOver as default
-};
+import e from"./AbstractPrefetch.js";class t extends e{static config={...e.config,name:"PrefetchWhenOver"};onMouseenter(){this.prefetch(new URL(this.$el.href))}}export{t as default};

package/atoms/Prefetch/PrefetchWhenVisible.cjs

@@ -1,47 +1,24 @@
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+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);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
@@ -52,6 +29,7 @@ var PrefetchWhenVisible_exports = {};
 __export(PrefetchWhenVisible_exports, {
   default: () => PrefetchWhenVisible
 });
+module.exports = __toCommonJS(PrefetchWhenVisible_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_AbstractPrefetch = __toESM(require("./AbstractPrefetch.cjs"), 1);
 var PrefetchWhenVisible = class extends (0, import_js_toolkit.withMountWhenInView)(import_AbstractPrefetch.default) {
@@ -59,8 +37,8 @@ var PrefetchWhenVisible = class extends (0, import_js_toolkit.withMountWhenInVie
     this.prefetch(new URL(this.$el.href));
   }
 };
-__publicField(PrefetchWhenVisible, "config", __spreadProps(__spreadValues({}, import_AbstractPrefetch.default.config), {
+__publicField(PrefetchWhenVisible, "config", {
+  ...import_AbstractPrefetch.default.config,
   name: "PrefetchWhenVisible"
-}));
-module.exports = __toCommonJS(PrefetchWhenVisible_exports);
+});
 if (module.exports.default) module.exports = module.exports.default;

package/atoms/Prefetch/PrefetchWhenVisible.d.ts

@@ -13,7 +13,7 @@ export default class PrefetchWhenVisible extends AbstractPrefetch {
      * @this    {PrefetchWhenVisibleInterface}
      * @returns {void}
      */
-    mounted(): void;
+    mounted(this: PrefetchWhenVisibleInterface): void;
 }
 export type PrefetchWhenVisibleInterface = PrefetchWhenVisible & {
     $el: HTMLAnchorElement;

package/atoms/Prefetch/PrefetchWhenVisible.js

@@ -1,36 +1 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import { withMountWhenInView } from "@studiometa/js-toolkit";
-import AbstractPrefetch from "./AbstractPrefetch.js";
-class PrefetchWhenVisible extends withMountWhenInView(AbstractPrefetch) {
-  mounted() {
-    this.prefetch(new URL(this.$el.href));
-  }
-}
-__publicField(PrefetchWhenVisible, "config", __spreadProps(__spreadValues({}, AbstractPrefetch.config), {
-  name: "PrefetchWhenVisible"
-}));
-export {
-  PrefetchWhenVisible as default
-};
+import{withMountWhenInView as t}from"@studiometa/js-toolkit";import e from"./AbstractPrefetch.js";class i extends t(e){static config={...e.config,name:"PrefetchWhenVisible"};mounted(){this.prefetch(new URL(this.$el.href))}}export{i as default};

package/atoms/Prefetch/index.cjs

@@ -4,27 +4,20 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+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/ui/atoms/Prefetch/index.js
 var Prefetch_exports = {};
@@ -33,8 +26,8 @@ __export(Prefetch_exports, {
   PrefetchWhenOver: () => import_PrefetchWhenOver.default,
   PrefetchWhenVisible: () => import_PrefetchWhenVisible.default
 });
+module.exports = __toCommonJS(Prefetch_exports);
 var import_AbstractPrefetch = __toESM(require("./AbstractPrefetch.cjs"), 1);
 var import_PrefetchWhenOver = __toESM(require("./PrefetchWhenOver.cjs"), 1);
 var import_PrefetchWhenVisible = __toESM(require("./PrefetchWhenVisible.cjs"), 1);
-module.exports = __toCommonJS(Prefetch_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/atoms/Prefetch/index.js

@@ -1,8 +1 @@
-import { default as default2 } from "./AbstractPrefetch.js";
-import { default as default3 } from "./PrefetchWhenOver.js";
-import { default as default4 } from "./PrefetchWhenVisible.js";
-export {
-  default2 as AbstractPrefetch,
-  default3 as PrefetchWhenOver,
-  default4 as PrefetchWhenVisible
-};
+import{default as t}from"./AbstractPrefetch.js";import{default as a}from"./PrefetchWhenOver.js";import{default as h}from"./PrefetchWhenVisible.js";export{t as AbstractPrefetch,a as PrefetchWhenOver,h as PrefetchWhenVisible};

package/atoms/ScrollAnimation/AbstractScrollAnimation.cjs

@@ -0,0 +1,126 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+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);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/atoms/ScrollAnimation/AbstractScrollAnimation.js
+var AbstractScrollAnimation_exports = {};
+__export(AbstractScrollAnimation_exports, {
+  default: () => AbstractScrollAnimation
+});
+module.exports = __toCommonJS(AbstractScrollAnimation_exports);
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_utils = require("@studiometa/js-toolkit/utils");
+function getDefaults() {
+  return {
+    x: 0,
+    y: 0,
+    z: 0,
+    scale: 1,
+    scaleX: 1,
+    scaleY: 1,
+    rotate: 0,
+    skewX: 0,
+    skewY: 0,
+    opacity: 1
+  };
+}
+var AbstractScrollAnimation = class extends (0, import_js_toolkit.withFreezedOptions)(import_js_toolkit.Base) {
+  get target() {
+    return this.$el;
+  }
+  get has() {
+    const has = {
+      x: false,
+      y: false,
+      z: false,
+      scale: false,
+      scaleX: false,
+      scaleY: false,
+      rotate: false,
+      skewX: false,
+      skewY: false,
+      opacity: false,
+      transform: false
+    };
+    Object.keys(this.$options.from).forEach((key) => {
+      has[key] = this.$options.from[key] !== this.$options.to[key];
+    });
+    has.transform = Object.keys(has).filter((key) => key !== "opacity" && key !== "transform").some((key) => has[key]);
+    Object.defineProperty(this, "has", { value: has });
+    return has;
+  }
+  scrolledInView(props) {
+    if (!this.has.opacity && !this.has.transform) {
+      return;
+    }
+    const progress = (0, import_utils.map)((0, import_utils.clamp)(props.dampedProgress.y, this.$options.playRange[0], this.$options.playRange[1]), this.$options.playRange[0], this.$options.playRange[1], 0, 1);
+    this.render(progress);
+  }
+  render(progress) {
+    if (this.has.opacity) {
+      this.target.style.opacity = String((0, import_utils.map)(progress, 0, 1, this.$options.from.opacity, this.$options.to.opacity));
+    }
+    if (this.has.transform) {
+      let transform = (0, import_utils.matrix)({
+        translateX: this.has.x ? (0, import_utils.lerp)(this.$options.from.x, this.$options.to.x, progress) : void 0,
+        translateY: this.has.y ? (0, import_utils.lerp)(this.$options.from.y, this.$options.to.y, progress) : void 0,
+        scaleX: this.has.scale ? (0, import_utils.lerp)(this.$options.from.scale, this.$options.to.scale, progress) : this.has.scaleX ? (0, import_utils.lerp)(this.$options.from.scaleX, this.$options.to.scaleX, progress) : void 0,
+        scaleY: this.has.scale ? (0, import_utils.lerp)(this.$options.from.scale, this.$options.to.scale, progress) : this.has.scaleY ? (0, import_utils.lerp)(this.$options.from.scaleY, this.$options.to.scaleY, progress) : void 0,
+        skewX: this.has.skewX ? (0, import_utils.lerp)(this.$options.from.skewX, this.$options.to.skewX, progress) : void 0,
+        skewY: this.has.skewY ? (0, import_utils.lerp)(this.$options.from.skewY, this.$options.to.skewY, progress) : void 0
+      });
+      if (this.has.rotate) {
+        transform += ` rotate(${(0, import_utils.lerp)(this.$options.from.rotate, this.$options.to.rotate, progress)}deg)`;
+      }
+      transform += `translateZ(${this.has.z ? (0, import_utils.lerp)(this.$options.from.z, this.$options.to.z, progress) : 0})`;
+      this.target.style.transform = transform;
+    }
+  }
+};
+__publicField(AbstractScrollAnimation, "config", {
+  name: "AbstractScrollAnimation",
+  options: {
+    playRange: {
+      type: Array,
+      default: () => [0, 1]
+    },
+    dampFactor: {
+      type: Number,
+      default: 0.5
+    },
+    dampPrecision: {
+      type: Number,
+      default: 1e-3
+    },
+    from: {
+      type: Object,
+      default: getDefaults,
+      merge: true
+    },
+    to: {
+      type: Object,
+      default: getDefaults,
+      merge: true
+    }
+  }
+});
+if (module.exports.default) module.exports = module.exports.default;

package/atoms/ScrollAnimation/AbstractScrollAnimation.d.ts

@@ -0,0 +1,133 @@
+/**
+ * @typedef {AbstractScrollAnimation & {
+ *   $options: {
+ *     playRange: string,
+ *     dampFactor: number,
+ *     dampPrecision: number,
+ *     from: AnimationOptions,
+ *     to: AnimationOptions,
+ *   },
+ * }} ScrollAnimationChildInterface
+ */
+/**
+ * AbstractScrollAnimation class.
+ *
+ * @todo add support for magic values in options to access key values:
+ * - viewport size
+ * - target size
+ * - root element size
+ * - etc.
+ *
+ * ```
+ * data-option-to="{ x: 100%, y: innerWidth / 2 }"
+ * ```
+ */
+export default class AbstractScrollAnimation extends Base {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        options: {
+            playRange: {
+                type: ArrayConstructor;
+                default: () => number[];
+            };
+            dampFactor: {
+                type: NumberConstructor;
+                default: number;
+            };
+            dampPrecision: {
+                type: NumberConstructor;
+                default: number;
+            };
+            from: {
+                type: ObjectConstructor;
+                default: typeof getDefaults;
+                merge: boolean;
+            };
+            to: {
+                type: ObjectConstructor;
+                default: typeof getDefaults;
+                merge: boolean;
+            };
+        };
+    };
+    /**
+     * Get the target element for the animation.
+     *
+     * @returns {HTMLElement}
+     */
+    get target(): HTMLElement;
+    /**
+     * Flags for style detection.
+     */
+    get has(): {
+        x: boolean;
+        y: boolean;
+        z: boolean;
+        scale: boolean;
+        scaleX: boolean;
+        scaleY: boolean;
+        rotate: boolean;
+        skewX: boolean;
+        skewY: boolean;
+        opacity: boolean;
+        transform: boolean;
+    };
+    /**
+     * @todo do not add unnecessary styles
+     */
+    scrolledInView(props: any): void;
+    /**
+     * Render the animation for the given progress.
+     *
+     * @param   {number} progress
+     * @returns {void}
+     */
+    render(progress: number): void;
+}
+export type AbstractScrollAnimationConstructor = typeof AbstractScrollAnimation;
+export type AnimationOptions = {
+    x?: number;
+    y?: number;
+    z?: number;
+    scale?: number;
+    scaleX?: number;
+    scaleY?: number;
+    rotate?: number;
+    skewX?: number;
+    skewY?: number;
+    opacity?: number;
+};
+export type ScrollAnimationChildInterface = AbstractScrollAnimation & {
+    $options: {
+        playRange: string;
+        dampFactor: number;
+        dampPrecision: number;
+        from: AnimationOptions;
+        to: AnimationOptions;
+    };
+};
+import { Base } from "@studiometa/js-toolkit";
+/**
+ * @typedef {typeof AbstractScrollAnimation} AbstractScrollAnimationConstructor
+ * @typedef {{
+ *   x?: number;
+ *   y?: number;
+ *   z?: number;
+ *   scale?: number;
+ *   scaleX?: number;
+ *   scaleY?: number;
+ *   rotate?: number;
+ *   skewX?: number;
+ *   skewY?: number;
+ *   opacity?: number;
+ * }} AnimationOptions
+ */
+/**
+ * Get animation configuration defaults.
+ * @returns {AnimationOptions}
+ */
+declare function getDefaults(): AnimationOptions;
+export {};

package/atoms/ScrollAnimation/AbstractScrollAnimation.js

@@ -0,0 +1 @@
+import{Base as a,withFreezedOptions as n}from"@studiometa/js-toolkit";import{matrix as h,lerp as e,map as o,clamp as r}from"@studiometa/js-toolkit/utils";function i(){return{x:0,y:0,z:0,scale:1,scaleX:1,scaleY:1,rotate:0,skewX:0,skewY:0,opacity:1}}class l extends n(a){static config={name:"AbstractScrollAnimation",options:{playRange:{type:Array,default:()=>[0,1]},dampFactor:{type:Number,default:.5},dampPrecision:{type:Number,default:.001},from:{type:Object,default:i,merge:!0},to:{type:Object,default:i,merge:!0}}};get target(){return this.$el}get has(){const t={x:!1,y:!1,z:!1,scale:!1,scaleX:!1,scaleY:!1,rotate:!1,skewX:!1,skewY:!1,opacity:!1,transform:!1};return Object.keys(this.$options.from).forEach(s=>{t[s]=this.$options.from[s]!==this.$options.to[s]}),t.transform=Object.keys(t).filter(s=>s!=="opacity"&&s!=="transform").some(s=>t[s]),Object.defineProperty(this,"has",{value:t}),t}scrolledInView(t){if(!this.has.opacity&&!this.has.transform)return;const s=o(r(t.dampedProgress.y,this.$options.playRange[0],this.$options.playRange[1]),this.$options.playRange[0],this.$options.playRange[1],0,1);this.render(s)}render(t){if(this.has.opacity&&(this.target.style.opacity=String(o(t,0,1,this.$options.from.opacity,this.$options.to.opacity))),this.has.transform){let s=h({translateX:this.has.x?e(this.$options.from.x,this.$options.to.x,t):void 0,translateY:this.has.y?e(this.$options.from.y,this.$options.to.y,t):void 0,scaleX:this.has.scale?e(this.$options.from.scale,this.$options.to.scale,t):this.has.scaleX?e(this.$options.from.scaleX,this.$options.to.scaleX,t):void 0,scaleY:this.has.scale?e(this.$options.from.scale,this.$options.to.scale,t):this.has.scaleY?e(this.$options.from.scaleY,this.$options.to.scaleY,t):void 0,skewX:this.has.skewX?e(this.$options.from.skewX,this.$options.to.skewX,t):void 0,skewY:this.has.skewY?e(this.$options.from.skewY,this.$options.to.skewY,t):void 0});this.has.rotate&&(s+=` rotate(${e(this.$options.from.rotate,this.$options.to.rotate,t)}deg)`),s+=`translateZ(${this.has.z?e(this.$options.from.z,this.$options.to.z,t):0})`,this.target.style.transform=s}}}export{l as default};

package/atoms/ScrollAnimation/ScrollAnimation.cjs

@@ -0,0 +1,51 @@
+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 __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+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);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/atoms/ScrollAnimation/ScrollAnimation.js
+var ScrollAnimation_exports = {};
+__export(ScrollAnimation_exports, {
+  default: () => ScrollAnimation
+});
+module.exports = __toCommonJS(ScrollAnimation_exports);
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_AbstractScrollAnimation = __toESM(require("./AbstractScrollAnimation.cjs"), 1);
+var ScrollAnimation = class extends (0, import_js_toolkit.withScrolledInView)(import_AbstractScrollAnimation.default, {}) {
+  get target() {
+    return this.$refs.target;
+  }
+  get dampFactor() {
+    return this.$options.dampFactor;
+  }
+  get dampPrecision() {
+    return this.$options.dampPrecision;
+  }
+};
+__publicField(ScrollAnimation, "config", {
+  ...import_AbstractScrollAnimation.default.config,
+  name: "ScrollAnimation",
+  refs: ["target"]
+});
+if (module.exports.default) module.exports = module.exports.default;