@studiometa/ui 1.6.0 → 1.8.0

package/ScrollAnimation/AbstractScrollAnimation.js

@@ -1,5 +1,5 @@
 import { Base, withFreezedOptions } from "@studiometa/js-toolkit";
-import { map, clamp01, animate } from "@studiometa/js-toolkit/utils";
+import { map, clamp01, animate, nextTick } from "@studiometa/js-toolkit/utils";
 class AbstractScrollAnimation extends withFreezedOptions(Base) {
   /**
    * Config.
@@ -28,6 +28,24 @@ class AbstractScrollAnimation extends withFreezedOptions(Base) {
       }
     }
   };
+  /**
+   * Current animation progress (0 to 1).
+   */
+  progress = 0;
+  /**
+   * Constructor.
+   */
+  constructor(element) {
+    super(element);
+    this.$on("mounted", () => {
+      this.render(this.progress);
+    });
+    this.$on("destroyed", () => {
+      nextTick(() => {
+        this.render(Math.round(this.progress));
+      });
+    });
+  }
   /**
    * Get the target element for the animation.
    */
@@ -73,6 +91,7 @@ class AbstractScrollAnimation extends withFreezedOptions(Base) {
    * Render the animation for the given progress.
    */
   render(progress) {
+    this.progress = progress;
     this.animation.progress(progress);
   }
 }

package/ScrollAnimation/AbstractScrollAnimation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/ScrollAnimation/AbstractScrollAnimation.ts"],
-  "sourcesContent": ["import { Base, withFreezedOptions } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, ScrollInViewProps } from '@studiometa/js-toolkit';\nimport { map, clamp01, animate } from '@studiometa/js-toolkit/utils';\nimport type { Keyframe } from '@studiometa/js-toolkit/utils';\n\nexport interface AbstractScrollAnimationProps extends BaseProps {\n  $options: {\n    playRange: [number, number] | [number, number, number];\n    from: Keyframe;\n    to: Keyframe;\n    keyframes: Keyframe[];\n    easing: [number, number, number, number];\n  };\n}\n\n/**\n * AbstractScrollAnimation class.\n */\nexport class AbstractScrollAnimation<\n  T extends BaseProps = BaseProps,\n> extends withFreezedOptions<Base>(Base)<T & AbstractScrollAnimationProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'AbstractScrollAnimation',\n    options: {\n      playRange: {\n        type: Array,\n        default: () => [0, 1],\n      },\n      from: {\n        type: Object,\n        default: () => ({}),\n      },\n      to: {\n        type: Object,\n        default: () => ({}),\n      },\n      keyframes: {\n        type: Array,\n      },\n      easing: {\n        type: Array,\n        default: () => [0, 0, 1, 1],\n      },\n    },\n  };\n\n  /**\n   * Get the target element for the animation.\n   */\n  get target() {\n    return this.$el as HTMLElement;\n  }\n\n  /**\n   * Lazily get animation.\n   */\n  get animation(): ReturnType<typeof animate> {\n    let { keyframes } = this.$options;\n    const { from, to } = this.$options;\n\n    if (keyframes.length <= 0 && from && to) {\n      keyframes = [from, to];\n    }\n\n    const animation = animate(this.target, keyframes, { easing: this.$options.easing });\n\n    Object.defineProperty(this, 'animation', {\n      value: animation,\n      configurable: true,\n    });\n\n    return animation;\n  }\n\n  get playRange(): [number, number] {\n    const { playRange } = this.$options;\n\n    let start = 0;\n    let end = 1;\n\n    if (playRange.length === 3) {\n      const [index, length, step] = playRange;\n      const clampedStep = clamp01(step);\n      const duration = Math.max(0, 1 - clampedStep * (length - 1));\n      start = clampedStep * index;\n      end = Math.min(1, start + duration);\n    } else if (playRange.length === 2) {\n      [start, end] = playRange;\n    }\n\n    return [start, end];\n  }\n\n  scrolledInView({ dampedProgress }: ScrollInViewProps) {\n    const [start, end] = this.playRange;\n    this.render(clamp01(map(dampedProgress.y, start, end, 0, 1)));\n  }\n\n  /**\n   * Render the animation for the given progress.\n   */\n  render(progress: number) {\n    this.animation.progress(progress);\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,MAAM,0BAA0B;AAEzC,SAAS,KAAK,SAAS,eAAe;AAgB/B,MAAM,gCAEH,mBAAyB,IAAI,EAAoC;AAAA;AAAA;AAAA;AAAA,EAIzE,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,WAAW;AAAA,QACT,MAAM;AAAA,QACN,SAAS,MAAM,CAAC,GAAG,CAAC;AAAA,MACtB;AAAA,MACA,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS,OAAO,CAAC;AAAA,MACnB;AAAA,MACA,IAAI;AAAA,QACF,MAAM;AAAA,QACN,SAAS,OAAO,CAAC;AAAA,MACnB;AAAA,MACA,WAAW;AAAA,QACT,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,SAAS,MAAM,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAS;AACX,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,YAAwC;AAC1C,QAAI,EAAE,UAAU,IAAI,KAAK;AACzB,UAAM,EAAE,MAAM,GAAG,IAAI,KAAK;AAE1B,QAAI,UAAU,UAAU,KAAK,QAAQ,IAAI;AACvC,kBAAY,CAAC,MAAM,EAAE;AAAA,IACvB;AAEA,UAAM,YAAY,QAAQ,KAAK,QAAQ,WAAW,EAAE,QAAQ,KAAK,SAAS,OAAO,CAAC;AAElF,WAAO,eAAe,MAAM,aAAa;AAAA,MACvC,OAAO;AAAA,MACP,cAAc;AAAA,IAChB,CAAC;AAED,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,YAA8B;AAChC,UAAM,EAAE,UAAU,IAAI,KAAK;AAE3B,QAAI,QAAQ;AACZ,QAAI,MAAM;AAEV,QAAI,UAAU,WAAW,GAAG;AAC1B,YAAM,CAAC,OAAO,QAAQ,IAAI,IAAI;AAC9B,YAAM,cAAc,QAAQ,IAAI;AAChC,YAAM,WAAW,KAAK,IAAI,GAAG,IAAI,eAAe,SAAS,EAAE;AAC3D,cAAQ,cAAc;AACtB,YAAM,KAAK,IAAI,GAAG,QAAQ,QAAQ;AAAA,IACpC,WAAW,UAAU,WAAW,GAAG;AACjC,OAAC,OAAO,GAAG,IAAI;AAAA,IACjB;AAEA,WAAO,CAAC,OAAO,GAAG;AAAA,EACpB;AAAA,EAEA,eAAe,EAAE,eAAe,GAAsB;AACpD,UAAM,CAAC,OAAO,GAAG,IAAI,KAAK;AAC1B,SAAK,OAAO,QAAQ,IAAI,eAAe,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC,CAAC;AAAA,EAC9D;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,UAAkB;AACvB,SAAK,UAAU,SAAS,QAAQ;AAAA,EAClC;AACF;",
+  "sourcesContent": ["import { Base, withFreezedOptions } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, ScrollInViewProps } from '@studiometa/js-toolkit';\nimport { map, clamp01, animate, nextTick } from '@studiometa/js-toolkit/utils';\nimport type { Keyframe } from '@studiometa/js-toolkit/utils';\n\nexport interface AbstractScrollAnimationProps extends BaseProps {\n  $options: {\n    playRange: [number, number] | [number, number, number];\n    from: Keyframe;\n    to: Keyframe;\n    keyframes: Keyframe[];\n    easing: [number, number, number, number];\n  };\n}\n\n/**\n * AbstractScrollAnimation class.\n */\nexport class AbstractScrollAnimation<\n  T extends BaseProps = BaseProps,\n> extends withFreezedOptions<Base>(Base)<T & AbstractScrollAnimationProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'AbstractScrollAnimation',\n    options: {\n      playRange: {\n        type: Array,\n        default: () => [0, 1],\n      },\n      from: {\n        type: Object,\n        default: () => ({}),\n      },\n      to: {\n        type: Object,\n        default: () => ({}),\n      },\n      keyframes: {\n        type: Array,\n      },\n      easing: {\n        type: Array,\n        default: () => [0, 0, 1, 1],\n      },\n    },\n  };\n\n  /**\n   * Current animation progress (0 to 1).\n   */\n  progress = 0;\n\n  /**\n   * Constructor.\n   */\n  constructor(element: HTMLElement) {\n    super(element);\n\n    // Restore animation state on mount\n    this.$on('mounted', () => {\n      this.render(this.progress);\n    });\n\n    // Complete animation to nearest boundary on destroy\n    this.$on('destroyed', () => {\n      nextTick(() => {\n        this.render(Math.round(this.progress));\n      });\n    });\n  }\n\n  /**\n   * Get the target element for the animation.\n   */\n  get target() {\n    return this.$el as HTMLElement;\n  }\n\n  /**\n   * Lazily get animation.\n   */\n  get animation(): ReturnType<typeof animate> {\n    let { keyframes } = this.$options;\n    const { from, to } = this.$options;\n\n    if (keyframes.length <= 0 && from && to) {\n      keyframes = [from, to];\n    }\n\n    const animation = animate(this.target, keyframes, { easing: this.$options.easing });\n\n    Object.defineProperty(this, 'animation', {\n      value: animation,\n      configurable: true,\n    });\n\n    return animation;\n  }\n\n  get playRange(): [number, number] {\n    const { playRange } = this.$options;\n\n    let start = 0;\n    let end = 1;\n\n    if (playRange.length === 3) {\n      const [index, length, step] = playRange;\n      const clampedStep = clamp01(step);\n      const duration = Math.max(0, 1 - clampedStep * (length - 1));\n      start = clampedStep * index;\n      end = Math.min(1, start + duration);\n    } else if (playRange.length === 2) {\n      [start, end] = playRange;\n    }\n\n    return [start, end];\n  }\n\n  scrolledInView({ dampedProgress }: ScrollInViewProps) {\n    const [start, end] = this.playRange;\n    this.render(clamp01(map(dampedProgress.y, start, end, 0, 1)));\n  }\n\n  /**\n   * Render the animation for the given progress.\n   */\n  render(progress: number) {\n    this.progress = progress;\n    this.animation.progress(progress);\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,MAAM,0BAA0B;AAEzC,SAAS,KAAK,SAAS,SAAS,gBAAgB;AAgBzC,MAAM,gCAEH,mBAAyB,IAAI,EAAoC;AAAA;AAAA;AAAA;AAAA,EAIzE,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,WAAW;AAAA,QACT,MAAM;AAAA,QACN,SAAS,MAAM,CAAC,GAAG,CAAC;AAAA,MACtB;AAAA,MACA,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS,OAAO,CAAC;AAAA,MACnB;AAAA,MACA,IAAI;AAAA,QACF,MAAM;AAAA,QACN,SAAS,OAAO,CAAC;AAAA,MACnB;AAAA,MACA,WAAW;AAAA,QACT,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,SAAS,MAAM,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AAAA;AAAA;AAAA;AAAA,EAKX,YAAY,SAAsB;AAChC,UAAM,OAAO;AAGb,SAAK,IAAI,WAAW,MAAM;AACxB,WAAK,OAAO,KAAK,QAAQ;AAAA,IAC3B,CAAC;AAGD,SAAK,IAAI,aAAa,MAAM;AAC1B,eAAS,MAAM;AACb,aAAK,OAAO,KAAK,MAAM,KAAK,QAAQ,CAAC;AAAA,MACvC,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAS;AACX,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,YAAwC;AAC1C,QAAI,EAAE,UAAU,IAAI,KAAK;AACzB,UAAM,EAAE,MAAM,GAAG,IAAI,KAAK;AAE1B,QAAI,UAAU,UAAU,KAAK,QAAQ,IAAI;AACvC,kBAAY,CAAC,MAAM,EAAE;AAAA,IACvB;AAEA,UAAM,YAAY,QAAQ,KAAK,QAAQ,WAAW,EAAE,QAAQ,KAAK,SAAS,OAAO,CAAC;AAElF,WAAO,eAAe,MAAM,aAAa;AAAA,MACvC,OAAO;AAAA,MACP,cAAc;AAAA,IAChB,CAAC;AAED,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,YAA8B;AAChC,UAAM,EAAE,UAAU,IAAI,KAAK;AAE3B,QAAI,QAAQ;AACZ,QAAI,MAAM;AAEV,QAAI,UAAU,WAAW,GAAG;AAC1B,YAAM,CAAC,OAAO,QAAQ,IAAI,IAAI;AAC9B,YAAM,cAAc,QAAQ,IAAI;AAChC,YAAM,WAAW,KAAK,IAAI,GAAG,IAAI,eAAe,SAAS,EAAE;AAC3D,cAAQ,cAAc;AACtB,YAAM,KAAK,IAAI,GAAG,QAAQ,QAAQ;AAAA,IACpC,WAAW,UAAU,WAAW,GAAG;AACjC,OAAC,OAAO,GAAG,IAAI;AAAA,IACjB;AAEA,WAAO,CAAC,OAAO,GAAG;AAAA,EACpB;AAAA,EAEA,eAAe,EAAE,eAAe,GAAsB;AACpD,UAAM,CAAC,OAAO,GAAG,IAAI,KAAK;AAC1B,SAAK,OAAO,QAAQ,IAAI,eAAe,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC,CAAC;AAAA,EAC9D;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,UAAkB;AACvB,SAAK,WAAW;AAChB,SAAK,UAAU,SAAS,QAAQ;AAAA,EAClC;AACF;",
   "names": []
 }

package/ScrollAnimation/ScrollAnimation.d.ts

@@ -8,7 +8,9 @@ export interface ScrollAnimationProps extends BaseProps {
 declare const ScrollAnimation_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").WithScrolledInViewInterface, AbstractScrollAnimation<BaseProps>, import("@studiometa/js-toolkit").WithScrolledInViewProps>;
 /**
  * ScrollAnimation class.
- * @link https://ui.studiometa.dev/-/components/ScrollAnimation/
+ *
+ * @deprecated Use `ScrollAnimationTimeline` with `ScrollAnimationTarget` children instead.
+ * @link https://ui.studiometa.dev/components/ScrollAnimation/
  */
 export declare class ScrollAnimation<T extends BaseProps = BaseProps> extends ScrollAnimation_base<T & ScrollAnimationProps> {
     /**
@@ -19,5 +21,9 @@ export declare class ScrollAnimation<T extends BaseProps = BaseProps> extends Sc
      * Use the `target` ref as animation target.
      */
     get target(): HTMLElement;
+    /**
+     * Display deprecation warning.
+     */
+    mounted(): void;
 }
 export {};

package/ScrollAnimation/ScrollAnimation.js

@@ -1,4 +1,5 @@
 import { withScrolledInView } from "@studiometa/js-toolkit";
+import { isDev } from "@studiometa/js-toolkit/utils";
 import { AbstractScrollAnimation } from "./AbstractScrollAnimation.js";
 class ScrollAnimation extends withScrolledInView(AbstractScrollAnimation, {}) {
   /**
@@ -15,6 +16,17 @@ class ScrollAnimation extends withScrolledInView(AbstractScrollAnimation, {}) {
   get target() {
     return this.$refs.target;
   }
+  /**
+   * Display deprecation warning.
+   */
+  mounted() {
+    if (isDev) {
+      console.warn(
+        `The ${this.$options.name} component is deprecated.`,
+        "\nUse `ScrollAnimationTimeline` with `ScrollAnimationTarget` children instead."
+      );
+    }
+  }
 }
 export {
   ScrollAnimation

package/ScrollAnimation/ScrollAnimation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/ScrollAnimation/ScrollAnimation.ts"],
-  "sourcesContent": ["import { withScrolledInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { AbstractScrollAnimation } from './AbstractScrollAnimation.js';\n\nexport interface ScrollAnimationProps extends BaseProps {\n  $refs: {\n    target: HTMLElement;\n  };\n}\n\n/**\n * ScrollAnimation class.\n * @link https://ui.studiometa.dev/-/components/ScrollAnimation/\n */\nexport class ScrollAnimation<\n  T extends BaseProps = BaseProps,\n> extends withScrolledInView<AbstractScrollAnimation>(AbstractScrollAnimation, {})<\n  T & ScrollAnimationProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AbstractScrollAnimation.config,\n    name: 'ScrollAnimation',\n    refs: ['target'],\n  };\n\n  /**\n   * Use the `target` ref as animation target.\n   */\n  get target(): HTMLElement {\n    return this.$refs.target;\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,0BAA0B;AAEnC,SAAS,+BAA+B;AAYjC,MAAM,wBAEH,mBAA4C,yBAAyB,CAAC,CAAC,EAE/E;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,GAAG,wBAAwB;AAAA,IAC3B,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAsB;AACxB,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;",
+  "sourcesContent": ["import { withScrolledInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { isDev } from '@studiometa/js-toolkit/utils';\nimport { AbstractScrollAnimation } from './AbstractScrollAnimation.js';\n\nexport interface ScrollAnimationProps extends BaseProps {\n  $refs: {\n    target: HTMLElement;\n  };\n}\n\n/**\n * ScrollAnimation class.\n *\n * @deprecated Use `ScrollAnimationTimeline` with `ScrollAnimationTarget` children instead.\n * @link https://ui.studiometa.dev/components/ScrollAnimation/\n */\nexport class ScrollAnimation<\n  T extends BaseProps = BaseProps,\n> extends withScrolledInView<AbstractScrollAnimation>(AbstractScrollAnimation, {})<\n  T & ScrollAnimationProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AbstractScrollAnimation.config,\n    name: 'ScrollAnimation',\n    refs: ['target'],\n  };\n\n  /**\n   * Use the `target` ref as animation target.\n   */\n  get target(): HTMLElement {\n    return this.$refs.target;\n  }\n\n  /**\n   * Display deprecation warning.\n   */\n  mounted() {\n    if (isDev) {\n      console.warn(\n        `The ${this.$options.name} component is deprecated.`,\n        '\\nUse `ScrollAnimationTimeline` with `ScrollAnimationTarget` children instead.',\n      );\n    }\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,0BAA0B;AAEnC,SAAS,aAAa;AACtB,SAAS,+BAA+B;AAcjC,MAAM,wBAEH,mBAA4C,yBAAyB,CAAC,CAAC,EAE/E;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,GAAG,wBAAwB;AAAA,IAC3B,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAsB;AACxB,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,OAAO;AACT,cAAQ;AAAA,QACN,OAAO,KAAK,SAAS,IAAI;AAAA,QACzB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/ScrollAnimation/ScrollAnimationChild.d.ts

@@ -5,6 +5,8 @@ export interface ScrollAnimationChildProps extends BaseProps {
 }
 /**
  * ScrollAnimationChild class.
+ *
+ * @deprecated Use `ScrollAnimationTarget` instead.
  */
 export declare class ScrollAnimationChild<T extends BaseProps = BaseProps> extends AbstractScrollAnimation<T & ScrollAnimationChildProps> {
     /**
@@ -19,6 +21,10 @@ export declare class ScrollAnimationChild<T extends BaseProps = BaseProps> exten
      * Local damped progress.
      */
     dampedProgress: ScrollInViewProps['dampedCurrent'];
+    /**
+     * Display deprecation warning.
+     */
+    mounted(): void;
     /**
      * Compute local damped progress.
      */

package/ScrollAnimation/ScrollAnimationChild.js

@@ -1,4 +1,4 @@
-import { damp, clamp01, domScheduler } from "@studiometa/js-toolkit/utils";
+import { damp, clamp01, domScheduler, isDev } from "@studiometa/js-toolkit/utils";
 import { AbstractScrollAnimation } from "./AbstractScrollAnimation.js";
 function updateProps(that, props, dampFactor, dampPrecision, axis = "x") {
   that.dampedCurrent[axis] = damp(
@@ -44,6 +44,17 @@ class ScrollAnimationChild extends AbstractScrollAnimation {
     x: 0,
     y: 0
   };
+  /**
+   * Display deprecation warning.
+   */
+  mounted() {
+    if (isDev) {
+      console.warn(
+        `The ${this.$options.name} component is deprecated.`,
+        "\nUse `ScrollAnimationTarget` instead."
+      );
+    }
+  }
   /**
    * Compute local damped progress.
    */
@@ -52,11 +63,13 @@ class ScrollAnimationChild extends AbstractScrollAnimation {
       const { dampFactor, dampPrecision } = this.$options;
       updateProps(this, props, dampFactor, dampPrecision, "x");
       updateProps(this, props, dampFactor, dampPrecision, "y");
-      props.dampedCurrent = this.dampedCurrent;
-      props.dampedProgress = this.dampedProgress;
     });
     domScheduler.write(() => {
-      super.scrolledInView(props);
+      super.scrolledInView({
+        ...props,
+        dampedCurrent: this.dampedCurrent,
+        dampedProgress: this.dampedProgress
+      });
     });
   }
 }

package/ScrollAnimation/ScrollAnimationChild.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/ScrollAnimation/ScrollAnimationChild.ts"],
-  "sourcesContent": ["import type {\n  BaseConfig,\n  BaseProps,\n  ScrollInViewProps,\n  WithScrolledInViewProps,\n} from '@studiometa/js-toolkit';\nimport { damp, clamp01, domScheduler } from '@studiometa/js-toolkit/utils';\nimport { AbstractScrollAnimation } from './AbstractScrollAnimation.js';\n\nexport interface ScrollAnimationChildProps extends BaseProps {\n  $options: WithScrolledInViewProps['$options'];\n}\n\nfunction updateProps(\n  // eslint-disable-next-line no-use-before-define\n  that: ScrollAnimationChild,\n  props: ScrollInViewProps,\n  dampFactor: number,\n  dampPrecision: number,\n  axis: 'x' | 'y' = 'x',\n) {\n  that.dampedCurrent[axis] = damp(\n    props.current[axis],\n    that.dampedCurrent[axis],\n    dampFactor,\n    dampPrecision,\n  );\n  that.dampedProgress[axis] = clamp01(\n    (that.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\n}\n\n/**\n * ScrollAnimationChild class.\n */\nexport class ScrollAnimationChild<T extends BaseProps = BaseProps> extends AbstractScrollAnimation<\n  T & ScrollAnimationChildProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'ScrollAnimationChild',\n    ...AbstractScrollAnimation.config,\n    options: {\n      ...AbstractScrollAnimation.config.options,\n      dampFactor: {\n        type: Number,\n        default: 0.1,\n      },\n      dampPrecision: {\n        type: Number,\n        default: 0.001,\n      },\n    },\n  };\n\n  /**\n   * Local damped current values.\n   */\n  dampedCurrent: ScrollInViewProps['dampedCurrent'] = {\n    x: 0,\n    y: 0,\n  };\n\n  /**\n   * Local damped progress.\n   */\n  dampedProgress: ScrollInViewProps['dampedCurrent'] = {\n    x: 0,\n    y: 0,\n  };\n\n  /**\n   * Compute local damped progress.\n   */\n  scrolledInView(props: ScrollInViewProps) {\n    domScheduler.read(() => {\n      const { dampFactor, dampPrecision } = this.$options;\n      updateProps(this, props, dampFactor, dampPrecision, 'x');\n      updateProps(this, props, dampFactor, dampPrecision, 'y');\n      props.dampedCurrent = this.dampedCurrent;\n      props.dampedProgress = this.dampedProgress;\n    });\n\n    domScheduler.write(() => {\n      super.scrolledInView(props);\n    });\n  }\n}\n"],
-  "mappings": "AAMA,SAAS,MAAM,SAAS,oBAAoB;AAC5C,SAAS,+BAA+B;AAMxC,SAAS,YAEP,MACA,OACA,YACA,eACA,OAAkB,KAClB;AACA,OAAK,cAAc,IAAI,IAAI;AAAA,IACzB,MAAM,QAAQ,IAAI;AAAA,IAClB,KAAK,cAAc,IAAI;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,OAAK,eAAe,IAAI,IAAI;AAAA,KACzB,KAAK,cAAc,IAAI,IAAI,MAAM,MAAM,IAAI,MAAM,MAAM,IAAI,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACtF;AACF;AAKO,MAAM,6BAA8D,wBAEzE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,GAAG,wBAAwB;AAAA,IAC3B,SAAS;AAAA,MACP,GAAG,wBAAwB,OAAO;AAAA,MAClC,YAAY;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,eAAe;AAAA,QACb,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAoD;AAAA,IAClD,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAqD;AAAA,IACnD,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe,OAA0B;AACvC,iBAAa,KAAK,MAAM;AACtB,YAAM,EAAE,YAAY,cAAc,IAAI,KAAK;AAC3C,kBAAY,MAAM,OAAO,YAAY,eAAe,GAAG;AACvD,kBAAY,MAAM,OAAO,YAAY,eAAe,GAAG;AACvD,YAAM,gBAAgB,KAAK;AAC3B,YAAM,iBAAiB,KAAK;AAAA,IAC9B,CAAC;AAED,iBAAa,MAAM,MAAM;AACvB,YAAM,eAAe,KAAK;AAAA,IAC5B,CAAC;AAAA,EACH;AACF;",
+  "sourcesContent": ["import type {\n  BaseConfig,\n  BaseProps,\n  ScrollInViewProps,\n  WithScrolledInViewProps,\n} from '@studiometa/js-toolkit';\nimport { damp, clamp01, domScheduler, isDev } from '@studiometa/js-toolkit/utils';\nimport { AbstractScrollAnimation } from './AbstractScrollAnimation.js';\n\nexport interface ScrollAnimationChildProps extends BaseProps {\n  $options: WithScrolledInViewProps['$options'];\n}\n\nfunction updateProps(\n  // eslint-disable-next-line no-use-before-define\n  that: ScrollAnimationChild,\n  props: ScrollInViewProps,\n  dampFactor: number,\n  dampPrecision: number,\n  axis: 'x' | 'y' = 'x',\n) {\n  that.dampedCurrent[axis] = damp(\n    props.current[axis],\n    that.dampedCurrent[axis],\n    dampFactor,\n    dampPrecision,\n  );\n  that.dampedProgress[axis] = clamp01(\n    (that.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\n}\n\n/**\n * ScrollAnimationChild class.\n *\n * @deprecated Use `ScrollAnimationTarget` instead.\n */\nexport class ScrollAnimationChild<T extends BaseProps = BaseProps> extends AbstractScrollAnimation<\n  T & ScrollAnimationChildProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'ScrollAnimationChild',\n    ...AbstractScrollAnimation.config,\n    options: {\n      ...AbstractScrollAnimation.config.options,\n      dampFactor: {\n        type: Number,\n        default: 0.1,\n      },\n      dampPrecision: {\n        type: Number,\n        default: 0.001,\n      },\n    },\n  };\n\n  /**\n   * Local damped current values.\n   */\n  dampedCurrent: ScrollInViewProps['dampedCurrent'] = {\n    x: 0,\n    y: 0,\n  };\n\n  /**\n   * Local damped progress.\n   */\n  dampedProgress: ScrollInViewProps['dampedCurrent'] = {\n    x: 0,\n    y: 0,\n  };\n\n  /**\n   * Display deprecation warning.\n   */\n  mounted() {\n    if (isDev) {\n      console.warn(\n        `The ${this.$options.name} component is deprecated.`,\n        '\\nUse `ScrollAnimationTarget` instead.',\n      );\n    }\n  }\n\n  /**\n   * Compute local damped progress.\n   */\n  scrolledInView(props: ScrollInViewProps) {\n    domScheduler.read(() => {\n      const { dampFactor, dampPrecision } = this.$options;\n      updateProps(this, props, dampFactor, dampPrecision, 'x');\n      updateProps(this, props, dampFactor, dampPrecision, 'y');\n    });\n\n    domScheduler.write(() => {\n      super.scrolledInView({\n        ...props,\n        dampedCurrent: this.dampedCurrent,\n        dampedProgress: this.dampedProgress,\n      });\n    });\n  }\n}\n"],
+  "mappings": "AAMA,SAAS,MAAM,SAAS,cAAc,aAAa;AACnD,SAAS,+BAA+B;AAMxC,SAAS,YAEP,MACA,OACA,YACA,eACA,OAAkB,KAClB;AACA,OAAK,cAAc,IAAI,IAAI;AAAA,IACzB,MAAM,QAAQ,IAAI;AAAA,IAClB,KAAK,cAAc,IAAI;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,OAAK,eAAe,IAAI,IAAI;AAAA,KACzB,KAAK,cAAc,IAAI,IAAI,MAAM,MAAM,IAAI,MAAM,MAAM,IAAI,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACtF;AACF;AAOO,MAAM,6BAA8D,wBAEzE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,GAAG,wBAAwB;AAAA,IAC3B,SAAS;AAAA,MACP,GAAG,wBAAwB,OAAO;AAAA,MAClC,YAAY;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,eAAe;AAAA,QACb,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAoD;AAAA,IAClD,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAqD;AAAA,IACnD,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,OAAO;AACT,cAAQ;AAAA,QACN,OAAO,KAAK,SAAS,IAAI;AAAA,QACzB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe,OAA0B;AACvC,iBAAa,KAAK,MAAM;AACtB,YAAM,EAAE,YAAY,cAAc,IAAI,KAAK;AAC3C,kBAAY,MAAM,OAAO,YAAY,eAAe,GAAG;AACvD,kBAAY,MAAM,OAAO,YAAY,eAAe,GAAG;AAAA,IACzD,CAAC;AAED,iBAAa,MAAM,MAAM;AACvB,YAAM,eAAe;AAAA,QACnB,GAAG;AAAA,QACH,eAAe,KAAK;AAAA,QACpB,gBAAgB,KAAK;AAAA,MACvB,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;",
   "names": []
 }

package/ScrollAnimation/ScrollAnimationChildWithEase.d.ts

@@ -1,12 +1,18 @@
 import type { BaseConfig } from '@studiometa/js-toolkit';
 declare const ScrollAnimationChildWithEase_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private/index.js").AnimationScrollWithEaseInterface, import("#private/index.js").AbstractScrollAnimation<import("@studiometa/js-toolkit").BaseProps>, import("#private/index.js").AnimationScrollWithEaseProps>;
 /**
- * ScrollAnimationChild class.
+ * ScrollAnimationChildWithEase class.
+ *
+ * @deprecated Use `ScrollAnimationTarget` instead.
  */
 export declare class ScrollAnimationChildWithEase extends ScrollAnimationChildWithEase_base {
     /**
      * Config.
      */
     static config: BaseConfig;
+    /**
+     * Display deprecation warning.
+     */
+    mounted(): void;
 }
 export {};

package/ScrollAnimation/ScrollAnimationChildWithEase.js

@@ -1,3 +1,4 @@
+import { isDev } from "@studiometa/js-toolkit/utils";
 import { ScrollAnimationChild } from "./ScrollAnimationChild.js";
 import { animationScrollWithEase } from "./animationScrollWithEase.js";
 class ScrollAnimationChildWithEase extends animationScrollWithEase(ScrollAnimationChild) {
@@ -8,6 +9,17 @@ class ScrollAnimationChildWithEase extends animationScrollWithEase(ScrollAnimati
     ...ScrollAnimationChild.config,
     name: "ScrollAnimationChildWithEase"
   };
+  /**
+   * Display deprecation warning.
+   */
+  mounted() {
+    if (isDev) {
+      console.warn(
+        `The ${this.$options.name} component is deprecated.`,
+        "\nUse `ScrollAnimationTarget` instead."
+      );
+    }
+  }
 }
 export {
   ScrollAnimationChildWithEase

package/ScrollAnimation/ScrollAnimationChildWithEase.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/ScrollAnimation/ScrollAnimationChildWithEase.ts"],
-  "sourcesContent": ["import type { BaseConfig } from '@studiometa/js-toolkit';\nimport { ScrollAnimationChild } from './ScrollAnimationChild.js';\nimport { animationScrollWithEase } from './animationScrollWithEase.js';\n\n/**\n * ScrollAnimationChild class.\n */\nexport class ScrollAnimationChildWithEase extends animationScrollWithEase(ScrollAnimationChild) {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...ScrollAnimationChild.config,\n    name: 'ScrollAnimationChildWithEase',\n  };\n}\n"],
-  "mappings": "AACA,SAAS,4BAA4B;AACrC,SAAS,+BAA+B;AAKjC,MAAM,qCAAqC,wBAAwB,oBAAoB,EAAE;AAAA;AAAA;AAAA;AAAA,EAI9F,OAAO,SAAqB;AAAA,IAC1B,GAAG,qBAAqB;AAAA,IACxB,MAAM;AAAA,EACR;AACF;",
+  "sourcesContent": ["import type { BaseConfig } from '@studiometa/js-toolkit';\nimport { isDev } from '@studiometa/js-toolkit/utils';\nimport { ScrollAnimationChild } from './ScrollAnimationChild.js';\nimport { animationScrollWithEase } from './animationScrollWithEase.js';\n\n/**\n * ScrollAnimationChildWithEase class.\n *\n * @deprecated Use `ScrollAnimationTarget` instead.\n */\nexport class ScrollAnimationChildWithEase extends animationScrollWithEase(ScrollAnimationChild) {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...ScrollAnimationChild.config,\n    name: 'ScrollAnimationChildWithEase',\n  };\n\n  /**\n   * Display deprecation warning.\n   */\n  mounted() {\n    if (isDev) {\n      console.warn(\n        `The ${this.$options.name} component is deprecated.`,\n        '\\nUse `ScrollAnimationTarget` instead.',\n      );\n    }\n  }\n}\n"],
+  "mappings": "AACA,SAAS,aAAa;AACtB,SAAS,4BAA4B;AACrC,SAAS,+BAA+B;AAOjC,MAAM,qCAAqC,wBAAwB,oBAAoB,EAAE;AAAA;AAAA;AAAA;AAAA,EAI9F,OAAO,SAAqB;AAAA,IAC1B,GAAG,qBAAqB;AAAA,IACxB,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,OAAO;AACT,cAAQ;AAAA,QACN,OAAO,KAAK,SAAS,IAAI;AAAA,QACzB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/ScrollAnimation/ScrollAnimationParent.d.ts

@@ -9,12 +9,18 @@ export interface ScrollAnimationParentProps extends BaseProps {
 declare const ScrollAnimationParent_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").WithScrolledInViewInterface, Base<BaseProps>, import("@studiometa/js-toolkit").WithScrolledInViewProps>;
 /**
  * ScrollAnimationParent class.
+ *
+ * @deprecated Use `ScrollAnimationTimeline` instead.
  */
 export declare class ScrollAnimationParent<T extends BaseProps = BaseProps> extends ScrollAnimationParent_base<T & ScrollAnimationParentProps> {
     /**
      * Config.
      */
     static config: BaseConfig;
+    /**
+     * Display deprecation warning.
+     */
+    mounted(): void;
     /**
      * Scrolled in view hook.
      */

package/ScrollAnimation/ScrollAnimationParent.js

@@ -1,4 +1,5 @@
 import { Base, withScrolledInView } from "@studiometa/js-toolkit";
+import { isDev } from "@studiometa/js-toolkit/utils";
 import { ScrollAnimationChild } from "./ScrollAnimationChild.js";
 class ScrollAnimationParent extends withScrolledInView(
   Base,
@@ -13,6 +14,17 @@ class ScrollAnimationParent extends withScrolledInView(
       ScrollAnimationChild
     }
   };
+  /**
+   * Display deprecation warning.
+   */
+  mounted() {
+    if (isDev) {
+      console.warn(
+        `The ${this.$options.name} component is deprecated.`,
+        "\nUse `ScrollAnimationTimeline` instead."
+      );
+    }
+  }
   /**
    * Scrolled in view hook.
    */

package/ScrollAnimation/ScrollAnimationParent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/ScrollAnimation/ScrollAnimationParent.ts"],
-  "sourcesContent": ["import { Base, ScrollInViewProps, withScrolledInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { ScrollAnimationChild } from './ScrollAnimationChild.js';\n\nexport interface ScrollAnimationParentProps extends BaseProps {\n  $children: {\n    ScrollAnimationChild: ScrollAnimationChild[];\n  };\n}\n\n/**\n * ScrollAnimationParent class.\n */\nexport class ScrollAnimationParent<T extends BaseProps = BaseProps> extends withScrolledInView(\n  Base,\n  {},\n)<T & ScrollAnimationParentProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'ScrollAnimationParent',\n    components: {\n      ScrollAnimationChild,\n    },\n  };\n\n  /**\n   * Scrolled in view hook.\n   */\n  scrolledInView(props: ScrollInViewProps) {\n    for (const child of this.$children.ScrollAnimationChild) {\n      child.scrolledInView(props);\n    }\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,MAAyB,0BAA0B;AAE5D,SAAS,4BAA4B;AAW9B,MAAM,8BAA+D;AAAA,EAC1E;AAAA,EACA,CAAC;AACH,EAAkC;AAAA;AAAA;AAAA;AAAA,EAIhC,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,YAAY;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe,OAA0B;AACvC,eAAW,SAAS,KAAK,UAAU,sBAAsB;AACvD,YAAM,eAAe,KAAK;AAAA,IAC5B;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { Base, ScrollInViewProps, withScrolledInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { isDev } from '@studiometa/js-toolkit/utils';\nimport { ScrollAnimationChild } from './ScrollAnimationChild.js';\n\nexport interface ScrollAnimationParentProps extends BaseProps {\n  $children: {\n    ScrollAnimationChild: ScrollAnimationChild[];\n  };\n}\n\n/**\n * ScrollAnimationParent class.\n *\n * @deprecated Use `ScrollAnimationTimeline` instead.\n */\nexport class ScrollAnimationParent<T extends BaseProps = BaseProps> extends withScrolledInView(\n  Base,\n  {},\n)<T & ScrollAnimationParentProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'ScrollAnimationParent',\n    components: {\n      ScrollAnimationChild,\n    },\n  };\n\n  /**\n   * Display deprecation warning.\n   */\n  mounted() {\n    if (isDev) {\n      console.warn(\n        `The ${this.$options.name} component is deprecated.`,\n        '\\nUse `ScrollAnimationTimeline` instead.',\n      );\n    }\n  }\n\n  /**\n   * Scrolled in view hook.\n   */\n  scrolledInView(props: ScrollInViewProps) {\n    for (const child of this.$children.ScrollAnimationChild) {\n      child.scrolledInView(props);\n    }\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,MAAyB,0BAA0B;AAE5D,SAAS,aAAa;AACtB,SAAS,4BAA4B;AAa9B,MAAM,8BAA+D;AAAA,EAC1E;AAAA,EACA,CAAC;AACH,EAAkC;AAAA;AAAA;AAAA;AAAA,EAIhC,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,YAAY;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,OAAO;AACT,cAAQ;AAAA,QACN,OAAO,KAAK,SAAS,IAAI;AAAA,QACzB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe,OAA0B;AACvC,eAAW,SAAS,KAAK,UAAU,sBAAsB;AACvD,YAAM,eAAe,KAAK;AAAA,IAC5B;AAAA,EACF;AACF;",
   "names": []
 }

package/ScrollAnimation/ScrollAnimationTarget.d.ts

@@ -0,0 +1,43 @@
+import type { BaseConfig, BaseProps, ScrollInViewProps, WithScrolledInViewProps } from '@studiometa/js-toolkit';
+import { AbstractScrollAnimation } from './AbstractScrollAnimation.js';
+export interface ScrollAnimationTargetProps extends BaseProps {
+    $options: WithScrolledInViewProps['$options'];
+}
+/**
+ * ScrollAnimationTarget class.
+ *
+ * A component that animates based on scroll progress from a parent `ScrollAnimationTimeline`.
+ * Each target can have its own animation keyframes and play range.
+ *
+ * @example
+ * ```html
+ * <div data-component="ScrollAnimationTimeline">
+ *   <div
+ *     data-component="ScrollAnimationTarget"
+ *     data-option-from='{"opacity": 0, "transform": "translateY(20px)"}'
+ *     data-option-to='{"opacity": 1, "transform": "translateY(0)"}'
+ *     data-option-play-range='[0, 0.5]'
+ *   >
+ *     Animated content
+ *   </div>
+ * </div>
+ * ```
+ */
+export declare class ScrollAnimationTarget<T extends BaseProps = BaseProps> extends AbstractScrollAnimation<T & ScrollAnimationTargetProps> {
+    /**
+     * Config.
+     */
+    static config: BaseConfig;
+    /**
+     * Local damped current values.
+     */
+    dampedCurrent: ScrollInViewProps['dampedCurrent'];
+    /**
+     * Local damped progress.
+     */
+    dampedProgress: ScrollInViewProps['dampedCurrent'];
+    /**
+     * Compute local damped progress.
+     */
+    scrolledInView(props: ScrollInViewProps): void;
+}

package/ScrollAnimation/ScrollAnimationTarget.js

@@ -0,0 +1,68 @@
+import { damp, clamp01, domScheduler } from "@studiometa/js-toolkit/utils";
+import { AbstractScrollAnimation } from "./AbstractScrollAnimation.js";
+function updateProps(that, props, dampFactor, dampPrecision, axis = "x") {
+  that.dampedCurrent[axis] = damp(
+    props.current[axis],
+    that.dampedCurrent[axis],
+    dampFactor,
+    dampPrecision
+  );
+  that.dampedProgress[axis] = clamp01(
+    (that.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis])
+  );
+}
+class ScrollAnimationTarget extends AbstractScrollAnimation {
+  /**
+   * Config.
+   */
+  static config = {
+    ...AbstractScrollAnimation.config,
+    name: "ScrollAnimationTarget",
+    options: {
+      ...AbstractScrollAnimation.config.options,
+      dampFactor: {
+        type: Number,
+        default: 0.1
+      },
+      dampPrecision: {
+        type: Number,
+        default: 1e-3
+      }
+    }
+  };
+  /**
+   * Local damped current values.
+   */
+  dampedCurrent = {
+    x: 0,
+    y: 0
+  };
+  /**
+   * Local damped progress.
+   */
+  dampedProgress = {
+    x: 0,
+    y: 0
+  };
+  /**
+   * Compute local damped progress.
+   */
+  scrolledInView(props) {
+    domScheduler.read(() => {
+      const { dampFactor, dampPrecision } = this.$options;
+      updateProps(this, props, dampFactor, dampPrecision, "x");
+      updateProps(this, props, dampFactor, dampPrecision, "y");
+    });
+    domScheduler.write(() => {
+      super.scrolledInView({
+        ...props,
+        dampedCurrent: this.dampedCurrent,
+        dampedProgress: this.dampedProgress
+      });
+    });
+  }
+}
+export {
+  ScrollAnimationTarget
+};
+//# sourceMappingURL=ScrollAnimationTarget.js.map

package/ScrollAnimation/ScrollAnimationTarget.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/ui/ScrollAnimation/ScrollAnimationTarget.ts"],
+  "sourcesContent": ["import type {\n  BaseConfig,\n  BaseProps,\n  ScrollInViewProps,\n  WithScrolledInViewProps,\n} from '@studiometa/js-toolkit';\nimport { damp, clamp01, domScheduler } from '@studiometa/js-toolkit/utils';\nimport { AbstractScrollAnimation } from './AbstractScrollAnimation.js';\n\nexport interface ScrollAnimationTargetProps extends BaseProps {\n  $options: WithScrolledInViewProps['$options'];\n}\n\nfunction updateProps(\n  // eslint-disable-next-line no-use-before-define\n  that: ScrollAnimationTarget,\n  props: ScrollInViewProps,\n  dampFactor: number,\n  dampPrecision: number,\n  axis: 'x' | 'y' = 'x',\n) {\n  that.dampedCurrent[axis] = damp(\n    props.current[axis],\n    that.dampedCurrent[axis],\n    dampFactor,\n    dampPrecision,\n  );\n  that.dampedProgress[axis] = clamp01(\n    (that.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\n}\n\n/**\n * ScrollAnimationTarget class.\n *\n * A component that animates based on scroll progress from a parent `ScrollAnimationTimeline`.\n * Each target can have its own animation keyframes and play range.\n *\n * @example\n * ```html\n * <div data-component=\"ScrollAnimationTimeline\">\n *   <div\n *     data-component=\"ScrollAnimationTarget\"\n *     data-option-from='{\"opacity\": 0, \"transform\": \"translateY(20px)\"}'\n *     data-option-to='{\"opacity\": 1, \"transform\": \"translateY(0)\"}'\n *     data-option-play-range='[0, 0.5]'\n *   >\n *     Animated content\n *   </div>\n * </div>\n * ```\n */\nexport class ScrollAnimationTarget<T extends BaseProps = BaseProps> extends AbstractScrollAnimation<\n  T & ScrollAnimationTargetProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AbstractScrollAnimation.config,\n    name: 'ScrollAnimationTarget',\n    options: {\n      ...AbstractScrollAnimation.config.options,\n      dampFactor: {\n        type: Number,\n        default: 0.1,\n      },\n      dampPrecision: {\n        type: Number,\n        default: 0.001,\n      },\n    },\n  };\n\n  /**\n   * Local damped current values.\n   */\n  dampedCurrent: ScrollInViewProps['dampedCurrent'] = {\n    x: 0,\n    y: 0,\n  };\n\n  /**\n   * Local damped progress.\n   */\n  dampedProgress: ScrollInViewProps['dampedCurrent'] = {\n    x: 0,\n    y: 0,\n  };\n\n  /**\n   * Compute local damped progress.\n   */\n  scrolledInView(props: ScrollInViewProps) {\n    domScheduler.read(() => {\n      const { dampFactor, dampPrecision } = this.$options;\n      updateProps(this, props, dampFactor, dampPrecision, 'x');\n      updateProps(this, props, dampFactor, dampPrecision, 'y');\n    });\n\n    domScheduler.write(() => {\n      super.scrolledInView({\n        ...props,\n        dampedCurrent: this.dampedCurrent,\n        dampedProgress: this.dampedProgress,\n      });\n    });\n  }\n}\n"],
+  "mappings": "AAMA,SAAS,MAAM,SAAS,oBAAoB;AAC5C,SAAS,+BAA+B;AAMxC,SAAS,YAEP,MACA,OACA,YACA,eACA,OAAkB,KAClB;AACA,OAAK,cAAc,IAAI,IAAI;AAAA,IACzB,MAAM,QAAQ,IAAI;AAAA,IAClB,KAAK,cAAc,IAAI;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,OAAK,eAAe,IAAI,IAAI;AAAA,KACzB,KAAK,cAAc,IAAI,IAAI,MAAM,MAAM,IAAI,MAAM,MAAM,IAAI,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACtF;AACF;AAsBO,MAAM,8BAA+D,wBAE1E;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,GAAG,wBAAwB;AAAA,IAC3B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,GAAG,wBAAwB,OAAO;AAAA,MAClC,YAAY;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,eAAe;AAAA,QACb,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAoD;AAAA,IAClD,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAqD;AAAA,IACnD,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe,OAA0B;AACvC,iBAAa,KAAK,MAAM;AACtB,YAAM,EAAE,YAAY,cAAc,IAAI,KAAK;AAC3C,kBAAY,MAAM,OAAO,YAAY,eAAe,GAAG;AACvD,kBAAY,MAAM,OAAO,YAAY,eAAe,GAAG;AAAA,IACzD,CAAC;AAED,iBAAa,MAAM,MAAM;AACvB,YAAM,eAAe;AAAA,QACnB,GAAG;AAAA,QACH,eAAe,KAAK;AAAA,QACpB,gBAAgB,KAAK;AAAA,MACvB,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;",
+  "names": []
+}

package/ScrollAnimation/ScrollAnimationTimeline.d.ts

@@ -0,0 +1,35 @@
+import { Base, ScrollInViewProps } from '@studiometa/js-toolkit';
+import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
+import { ScrollAnimationTarget } from './ScrollAnimationTarget.js';
+export interface ScrollAnimationTimelineProps extends BaseProps {
+    $children: {
+        ScrollAnimationTarget: ScrollAnimationTarget[];
+    };
+}
+declare const ScrollAnimationTimeline_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").WithScrolledInViewInterface, Base<BaseProps>, import("@studiometa/js-toolkit").WithScrolledInViewProps>;
+/**
+ * ScrollAnimationTimeline class.
+ *
+ * A component that manages scroll-based animations for its children.
+ * Use with `ScrollAnimationTarget` children components.
+ *
+ * @example
+ * ```html
+ * <div data-component="ScrollAnimationTimeline">
+ *   <div data-component="ScrollAnimationTarget" data-option-from='{"opacity": 0}' data-option-to='{"opacity": 1}'>
+ *     Content
+ *   </div>
+ * </div>
+ * ```
+ */
+export declare class ScrollAnimationTimeline<T extends BaseProps = BaseProps> extends ScrollAnimationTimeline_base<T & ScrollAnimationTimelineProps> {
+    /**
+     * Config.
+     */
+    static config: BaseConfig;
+    /**
+     * Scrolled in view hook.
+     */
+    scrolledInView(props: ScrollInViewProps): void;
+}
+export {};

package/ScrollAnimation/ScrollAnimationTimeline.js

@@ -0,0 +1,28 @@
+import { Base, withScrolledInView } from "@studiometa/js-toolkit";
+import { ScrollAnimationTarget } from "./ScrollAnimationTarget.js";
+class ScrollAnimationTimeline extends withScrolledInView(
+  Base,
+  {}
+) {
+  /**
+   * Config.
+   */
+  static config = {
+    name: "ScrollAnimationTimeline",
+    components: {
+      ScrollAnimationTarget
+    }
+  };
+  /**
+   * Scrolled in view hook.
+   */
+  scrolledInView(props) {
+    for (const child of this.$children.ScrollAnimationTarget) {
+      child.scrolledInView(props);
+    }
+  }
+}
+export {
+  ScrollAnimationTimeline
+};
+//# sourceMappingURL=ScrollAnimationTimeline.js.map

package/ScrollAnimation/ScrollAnimationTimeline.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/ui/ScrollAnimation/ScrollAnimationTimeline.ts"],
+  "sourcesContent": ["import { Base, ScrollInViewProps, withScrolledInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { ScrollAnimationTarget } from './ScrollAnimationTarget.js';\n\nexport interface ScrollAnimationTimelineProps extends BaseProps {\n  $children: {\n    ScrollAnimationTarget: ScrollAnimationTarget[];\n  };\n}\n\n/**\n * ScrollAnimationTimeline class.\n *\n * A component that manages scroll-based animations for its children.\n * Use with `ScrollAnimationTarget` children components.\n *\n * @example\n * ```html\n * <div data-component=\"ScrollAnimationTimeline\">\n *   <div data-component=\"ScrollAnimationTarget\" data-option-from='{\"opacity\": 0}' data-option-to='{\"opacity\": 1}'>\n *     Content\n *   </div>\n * </div>\n * ```\n */\nexport class ScrollAnimationTimeline<T extends BaseProps = BaseProps> extends withScrolledInView(\n  Base,\n  {},\n)<T & ScrollAnimationTimelineProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'ScrollAnimationTimeline',\n    components: {\n      ScrollAnimationTarget,\n    },\n  };\n\n  /**\n   * Scrolled in view hook.\n   */\n  scrolledInView(props: ScrollInViewProps) {\n    for (const child of this.$children.ScrollAnimationTarget) {\n      child.scrolledInView(props);\n    }\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,MAAyB,0BAA0B;AAE5D,SAAS,6BAA6B;AAuB/B,MAAM,gCAAiE;AAAA,EAC5E;AAAA,EACA,CAAC;AACH,EAAoC;AAAA;AAAA;AAAA;AAAA,EAIlC,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,YAAY;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe,OAA0B;AACvC,eAAW,SAAS,KAAK,UAAU,uBAAuB;AACxD,YAAM,eAAe,KAAK;AAAA,IAC5B;AAAA,EACF;AACF;",
+  "names": []
+}

package/ScrollAnimation/ScrollAnimationWithEase.d.ts

@@ -1,12 +1,18 @@
 import { type BaseConfig } from '@studiometa/js-toolkit';
 declare const ScrollAnimationWithEase_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private/index.js").AnimationScrollWithEaseInterface, import("#private/index.js").AbstractScrollAnimation<import("@studiometa/js-toolkit").BaseProps>, import("#private/index.js").AnimationScrollWithEaseProps>;
 /**
- * ScrollAnimation class.
+ * ScrollAnimationWithEase class.
+ *
+ * @deprecated Use `ScrollAnimationTimeline` with `ScrollAnimationTarget` children instead.
  */
 export declare class ScrollAnimationWithEase extends ScrollAnimationWithEase_base {
     /**
      * Config.
      */
     static config: BaseConfig;
+    /**
+     * Display deprecation warning.
+     */
+    mounted(): void;
 }
 export {};

package/ScrollAnimation/ScrollAnimationWithEase.js

@@ -1,3 +1,4 @@
+import { isDev } from "@studiometa/js-toolkit/utils";
 import { ScrollAnimation } from "./ScrollAnimation.js";
 import { animationScrollWithEase } from "./animationScrollWithEase.js";
 class ScrollAnimationWithEase extends animationScrollWithEase(ScrollAnimation) {
@@ -8,6 +9,17 @@ class ScrollAnimationWithEase extends animationScrollWithEase(ScrollAnimation) {
     ...ScrollAnimation.config,
     name: "ScrollAnimationWithEase"
   };
+  /**
+   * Display deprecation warning.
+   */
+  mounted() {
+    if (isDev) {
+      console.warn(
+        `The ${this.$options.name} component is deprecated.`,
+        "\nUse `ScrollAnimationTimeline` with `ScrollAnimationTarget` children instead."
+      );
+    }
+  }
 }
 export {
   ScrollAnimationWithEase

package/ScrollAnimation/ScrollAnimationWithEase.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/ScrollAnimation/ScrollAnimationWithEase.ts"],
-  "sourcesContent": ["import { type BaseConfig } from '@studiometa/js-toolkit';\nimport { ScrollAnimation } from './ScrollAnimation.js';\nimport { animationScrollWithEase } from './animationScrollWithEase.js';\n\n/**\n * ScrollAnimation class.\n */\nexport class ScrollAnimationWithEase extends animationScrollWithEase(ScrollAnimation) {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...ScrollAnimation.config,\n    name: 'ScrollAnimationWithEase',\n  };\n}\n"],
-  "mappings": "AACA,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AAKjC,MAAM,gCAAgC,wBAAwB,eAAe,EAAE;AAAA;AAAA;AAAA;AAAA,EAIpF,OAAO,SAAqB;AAAA,IAC1B,GAAG,gBAAgB;AAAA,IACnB,MAAM;AAAA,EACR;AACF;",
+  "sourcesContent": ["import { type BaseConfig } from '@studiometa/js-toolkit';\nimport { isDev } from '@studiometa/js-toolkit/utils';\nimport { ScrollAnimation } from './ScrollAnimation.js';\nimport { animationScrollWithEase } from './animationScrollWithEase.js';\n\n/**\n * ScrollAnimationWithEase class.\n *\n * @deprecated Use `ScrollAnimationTimeline` with `ScrollAnimationTarget` children instead.\n */\nexport class ScrollAnimationWithEase extends animationScrollWithEase(ScrollAnimation) {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...ScrollAnimation.config,\n    name: 'ScrollAnimationWithEase',\n  };\n\n  /**\n   * Display deprecation warning.\n   */\n  mounted() {\n    if (isDev) {\n      console.warn(\n        `The ${this.$options.name} component is deprecated.`,\n        '\\nUse `ScrollAnimationTimeline` with `ScrollAnimationTarget` children instead.',\n      );\n    }\n  }\n}\n"],
+  "mappings": "AACA,SAAS,aAAa;AACtB,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AAOjC,MAAM,gCAAgC,wBAAwB,eAAe,EAAE;AAAA;AAAA;AAAA;AAAA,EAIpF,OAAO,SAAqB;AAAA,IAC1B,GAAG,gBAAgB;AAAA,IACnB,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,OAAO;AACT,cAAQ;AAAA,QACN,OAAO,KAAK,SAAS,IAAI;AAAA,QACzB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/ScrollAnimation/animationScrollWithEase.d.ts

@@ -9,5 +9,7 @@ export interface AnimationScrollWithEaseInterface extends BaseInterface {
 }
 /**
  * Extend a `ScrollAnimation` component to use easings.
+ *
+ * @deprecated This decorator is deprecated. Easing can be applied directly via CSS or animation options.
  */
 export declare function animationScrollWithEase<S extends AbstractScrollAnimation>(ScrollAnimation: typeof AbstractScrollAnimation): BaseDecorator<AnimationScrollWithEaseInterface, S, AnimationScrollWithEaseProps>;

package/ScrollAnimation/animationScrollWithEase.js

@@ -1,4 +1,4 @@
-import { ease } from "@studiometa/js-toolkit/utils";
+import { ease, isDev } from "@studiometa/js-toolkit/utils";
 const regex = /ease([A-Z])/;
 const eases = Object.fromEntries(
   Object.entries(ease).filter(([name]) => name.startsWith("ease")).map(([name, value]) => [name.replace(regex, (match, $1) => $1.toLowerCase()), value])
@@ -19,6 +19,17 @@ function animationScrollWithEase(ScrollAnimation) {
         }
       }
     };
+    /**
+     * Display a deprecation warning.
+     */
+    mounted() {
+      if (isDev) {
+        console.warn(
+          `The animationScrollWithEase decorator is deprecated.`,
+          "\nEasing can be applied directly via CSS or animation options."
+        );
+      }
+    }
     /**
      * Eases the progress value.
      */