@wix/motion 1.627.0 → 1.628.0

package/dist/cjs/CustomAnimation.js

@@ -0,0 +1,190 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.CustomAnimation = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+/**
+ * @class CustomAnimation
+ *
+ * A wrapper object for Animation that mimics the same interface but implements CustomEffect that runs JS code instead of KeyframeEffect.
+ * The class is implemented by holding an inner Animation object instead of inheritance due to some browsers not allowing extension of built-in objects.
+ */
+class CustomAnimation {
+  constructor(customEffect, target, effectOptions, timingOptions) {
+    (0, _defineProperty2.default)(this, "_animation", void 0);
+    (0, _defineProperty2.default)(this, "customEffect", void 0);
+    (0, _defineProperty2.default)(this, "progress", void 0);
+    (0, _defineProperty2.default)(this, "_tickCbId", void 0);
+    (0, _defineProperty2.default)(this, "_finishHandler", void 0);
+    // overriding composite so that animation is not replaced and removed
+    const effect = new KeyframeEffect(target, [], {
+      ...effectOptions,
+      composite: 'add'
+    });
+    const {
+      timeline
+    } = timingOptions;
+    this._animation = new Animation(effect, timeline);
+    this._tickCbId = null;
+    this.progress = null;
+    this.customEffect = progress => customEffect(effect.target, progress);
+
+    // stop loop if animation is removed from the DOM after finish (does not fire 'remove' event)
+    this._finishHandler = _ => {
+      var _target;
+      if (!((_target = this.effect.target) != null && _target.getAnimations().find(a => a === this._animation))) {
+        this.cancel();
+      }
+    };
+    this.addEventListener('finish', this._finishHandler);
+    this.addEventListener('remove', this._finishHandler);
+  }
+
+  // private tick method for customEffect loop implementation
+  _tick() {
+    try {
+      var _this$effect;
+      const progress = ((_this$effect = this.effect) == null ? void 0 : _this$effect.getComputedTiming().progress) ?? null;
+      if (progress !== this.progress) {
+        var _this$customEffect;
+        (_this$customEffect = this.customEffect) == null || _this$customEffect.call(this, progress);
+        this.progress = progress;
+      }
+      this._tickCbId = requestAnimationFrame(() => {
+        this._tick();
+      });
+    } catch (error) {
+      this._tickCbId = null;
+      console.error(`failed to run customEffect! effectId: ${this.id}, error: ${error instanceof Error ? error.message : error}`);
+    }
+  }
+
+  // Animation timing properties
+  get currentTime() {
+    return this._animation.currentTime;
+  }
+  set currentTime(time) {
+    this._animation.currentTime = time;
+  }
+  get startTime() {
+    return this._animation.startTime;
+  }
+  set startTime(time) {
+    this._animation.startTime = time;
+  }
+  get playbackRate() {
+    return this._animation.playbackRate;
+  }
+  set playbackRate(speed) {
+    this._animation.playbackRate = speed;
+  }
+
+  // Animation basic properties
+  get id() {
+    return this._animation.id;
+  }
+  set id(uid) {
+    this._animation.id = uid;
+  }
+  get effect() {
+    return this._animation.effect;
+  }
+  set effect(e) {
+    this._animation.effect = e;
+  }
+  get timeline() {
+    return this._animation.timeline;
+  }
+  set timeline(tl) {
+    this._animation.timeline = tl;
+  }
+
+  // Animation readonly state properties
+  get finished() {
+    return this._animation.finished;
+  }
+  get pending() {
+    return this._animation.pending;
+  }
+  get playState() {
+    return this._animation.playState;
+  }
+  get ready() {
+    return this._animation.ready;
+  }
+  get replaceState() {
+    return this._animation.replaceState;
+  }
+
+  // Animation event handlers
+  get oncancel() {
+    return this._animation.oncancel;
+  }
+  set oncancel(cb) {
+    this._animation.oncancel = cb;
+  }
+  get onfinish() {
+    return this._animation.onfinish;
+  }
+  set onfinish(cb) {
+    this._animation.onfinish = cb;
+  }
+  get onremove() {
+    return this._animation.onremove;
+  }
+  set onremove(cb) {
+    this._animation.onremove = cb;
+  }
+
+  // CustomAnimation overridden methods
+  play() {
+    this._animation.play();
+    cancelAnimationFrame(this._tickCbId);
+    this._tickCbId = requestAnimationFrame(() => this._tick());
+  }
+  pause() {
+    this._animation.pause();
+    cancelAnimationFrame(this._tickCbId);
+    this._tickCbId = null;
+  }
+  cancel() {
+    this.removeEventListener('finish', this._finishHandler);
+    this.removeEventListener('remove', this._finishHandler);
+    this._animation.cancel();
+    // signaling cancelation for customEffect to handle it as desired
+    this.customEffect(null);
+    cancelAnimationFrame(this._tickCbId);
+    this._tickCbId = null;
+  }
+  commitStyles() {
+    console.warn('CustomEffect animations do not support commitStyles method as they have no style to commit');
+  }
+
+  // Animation methods without override
+  finish() {
+    this._animation.finish();
+  }
+  persist() {
+    this._animation.persist();
+  }
+  reverse() {
+    this._animation.reverse();
+  }
+  updatePlaybackRate(playbackRate) {
+    this._animation.updatePlaybackRate(playbackRate);
+  }
+
+  // Animation events API
+  addEventListener(type, listener, options) {
+    this._animation.addEventListener(type, listener, options);
+  }
+  removeEventListener(type, listener, options) {
+    this._animation.removeEventListener(type, listener, options);
+  }
+  dispatchEvent(event) {
+    return this._animation.dispatchEvent(event);
+  }
+}
+exports.CustomAnimation = CustomAnimation;
+//# sourceMappingURL=CustomAnimation.js.map

package/dist/cjs/CustomAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CustomAnimation","constructor","customEffect","target","effectOptions","timingOptions","_defineProperty2","default","effect","KeyframeEffect","composite","timeline","_animation","Animation","_tickCbId","progress","_finishHandler","_","_target","getAnimations","find","a","cancel","addEventListener","_tick","_this$effect","getComputedTiming","_this$customEffect","call","requestAnimationFrame","error","console","id","Error","message","currentTime","time","startTime","playbackRate","speed","uid","e","tl","finished","pending","playState","ready","replaceState","oncancel","cb","onfinish","onremove","play","cancelAnimationFrame","pause","removeEventListener","commitStyles","warn","finish","persist","reverse","updatePlaybackRate","type","listener","options","dispatchEvent","event","exports"],"sources":["../../src/CustomAnimation.ts"],"sourcesContent":["/**\n * @class CustomAnimation\n *\n * A wrapper object for Animation that mimics the same interface but implements CustomEffect that runs JS code instead of KeyframeEffect.\n * The class is implemented by holding an inner Animation object instead of inheritance due to some browsers not allowing extension of built-in objects.\n */\nexport class CustomAnimation {\n  _animation: Animation;\n  customEffect: (progress: number | null) => void;\n  progress: number | null;\n  _tickCbId: number | null;\n  _finishHandler: (_: any) => void;\n\n  constructor(\n    customEffect: (element: Element | null, progress: number | null) => void,\n    target: Element | null,\n    effectOptions: KeyframeEffectOptions,\n    timingOptions: { timeline?: AnimationTimeline | null },\n  ) {\n    // overriding composite so that animation is not replaced and removed\n    const effect = new KeyframeEffect(target, [], {\n      ...effectOptions,\n      composite: 'add',\n    });\n    const { timeline } = timingOptions;\n    this._animation = new Animation(effect, timeline);\n\n    this._tickCbId = null;\n    this.progress = null;\n    this.customEffect = (progress: number | null) =>\n      customEffect(effect.target, progress);\n\n    // stop loop if animation is removed from the DOM after finish (does not fire 'remove' event)\n    this._finishHandler = (_: any) => {\n      if (\n        !(this.effect as KeyframeEffect).target\n          ?.getAnimations()\n          .find((a) => a === this._animation)\n      ) {\n        this.cancel();\n      }\n    };\n    this.addEventListener('finish', this._finishHandler);\n    this.addEventListener('remove', this._finishHandler);\n  }\n\n  // private tick method for customEffect loop implementation\n  private _tick() {\n    try {\n      const progress = this.effect?.getComputedTiming().progress ?? null;\n      if (progress !== this.progress) {\n        this.customEffect?.(progress);\n        this.progress = progress;\n      }\n      this._tickCbId = requestAnimationFrame(() => {\n        this._tick();\n      });\n    } catch (error) {\n      this._tickCbId = null;\n      console.error(\n        `failed to run customEffect! effectId: ${this.id}, error: ${\n          error instanceof Error ? error.message : error\n        }`,\n      );\n    }\n  }\n\n  // Animation timing properties\n  get currentTime() {\n    return this._animation.currentTime;\n  }\n  set currentTime(time: CSSNumberish | null) {\n    this._animation.currentTime = time;\n  }\n  get startTime() {\n    return this._animation.startTime;\n  }\n  set startTime(time: CSSNumberish | null) {\n    this._animation.startTime = time;\n  }\n  get playbackRate() {\n    return this._animation.playbackRate;\n  }\n  set playbackRate(speed: number) {\n    this._animation.playbackRate = speed;\n  }\n\n  // Animation basic properties\n  get id() {\n    return this._animation.id;\n  }\n  set id(uid: string) {\n    this._animation.id = uid;\n  }\n  get effect() {\n    return this._animation.effect;\n  }\n  set effect(e: AnimationEffect | null) {\n    this._animation.effect = e;\n  }\n  get timeline() {\n    return this._animation.timeline;\n  }\n  set timeline(tl: AnimationTimeline | null) {\n    this._animation.timeline = tl;\n  }\n\n  // Animation readonly state properties\n  get finished() {\n    return this._animation.finished;\n  }\n  get pending() {\n    return this._animation.pending;\n  }\n  get playState() {\n    return this._animation.playState;\n  }\n  get ready() {\n    return this._animation.ready;\n  }\n  get replaceState() {\n    return this._animation.replaceState;\n  }\n\n  // Animation event handlers\n  get oncancel() {\n    return this._animation.oncancel;\n  }\n  set oncancel(\n    cb: ((this: Animation, ev: AnimationPlaybackEvent) => any) | null,\n  ) {\n    this._animation.oncancel = cb;\n  }\n  get onfinish() {\n    return this._animation.onfinish;\n  }\n  set onfinish(\n    cb: ((this: Animation, ev: AnimationPlaybackEvent) => any) | null,\n  ) {\n    this._animation.onfinish = cb;\n  }\n  get onremove() {\n    return this._animation.onremove;\n  }\n  set onremove(cb: ((this: Animation, ev: Event) => any) | null) {\n    this._animation.onremove = cb;\n  }\n\n  // CustomAnimation overridden methods\n  play() {\n    this._animation.play();\n    cancelAnimationFrame(this._tickCbId!);\n    this._tickCbId = requestAnimationFrame(() => this._tick());\n  }\n\n  pause() {\n    this._animation.pause();\n    cancelAnimationFrame(this._tickCbId!);\n    this._tickCbId = null;\n  }\n\n  cancel() {\n    this.removeEventListener('finish', this._finishHandler);\n    this.removeEventListener('remove', this._finishHandler);\n    this._animation.cancel();\n    // signaling cancelation for customEffect to handle it as desired\n    this.customEffect(null);\n    cancelAnimationFrame(this._tickCbId!);\n    this._tickCbId = null;\n  }\n\n  commitStyles() {\n    console.warn(\n      'CustomEffect animations do not support commitStyles method as they have no style to commit',\n    );\n  }\n\n  // Animation methods without override\n  finish() {\n    this._animation.finish();\n  }\n  persist() {\n    this._animation.persist();\n  }\n  reverse() {\n    this._animation.reverse();\n  }\n  updatePlaybackRate(playbackRate: number) {\n    this._animation.updatePlaybackRate(playbackRate);\n  }\n\n  // Animation events API\n  addEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) {\n    this._animation.addEventListener(type, listener, options);\n  }\n  removeEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) {\n    this._animation.removeEventListener(type, listener, options);\n  }\n  dispatchEvent(event: Event) {\n    return this._animation.dispatchEvent(event);\n  }\n}\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,eAAe,CAAC;EAO3BC,WAAWA,CACTC,YAAwE,EACxEC,MAAsB,EACtBC,aAAoC,EACpCC,aAAsD,EACtD;IAAA,IAAAC,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IACA;IACA,MAAMC,MAAM,GAAG,IAAIC,cAAc,CAACN,MAAM,EAAE,EAAE,EAAE;MAC5C,GAAGC,aAAa;MAChBM,SAAS,EAAE;IACb,CAAC,CAAC;IACF,MAAM;MAAEC;IAAS,CAAC,GAAGN,aAAa;IAClC,IAAI,CAACO,UAAU,GAAG,IAAIC,SAAS,CAACL,MAAM,EAAEG,QAAQ,CAAC;IAEjD,IAAI,CAACG,SAAS,GAAG,IAAI;IACrB,IAAI,CAACC,QAAQ,GAAG,IAAI;IACpB,IAAI,CAACb,YAAY,GAAIa,QAAuB,IAC1Cb,YAAY,CAACM,MAAM,CAACL,MAAM,EAAEY,QAAQ,CAAC;;IAEvC;IACA,IAAI,CAACC,cAAc,GAAIC,CAAM,IAAK;MAAA,IAAAC,OAAA;MAChC,IACE,GAAAA,OAAA,GAAE,IAAI,CAACV,MAAM,CAAoBL,MAAM,aAAtCe,OAAA,CACGC,aAAa,CAAC,CAAC,CAChBC,IAAI,CAAEC,CAAC,IAAKA,CAAC,KAAK,IAAI,CAACT,UAAU,CAAC,GACrC;QACA,IAAI,CAACU,MAAM,CAAC,CAAC;MACf;IACF,CAAC;IACD,IAAI,CAACC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAACP,cAAc,CAAC;IACpD,IAAI,CAACO,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAACP,cAAc,CAAC;EACtD;;EAEA;EACQQ,KAAKA,CAAA,EAAG;IACd,IAAI;MAAA,IAAAC,YAAA;MACF,MAAMV,QAAQ,GAAG,EAAAU,YAAA,OAAI,CAACjB,MAAM,qBAAXiB,YAAA,CAAaC,iBAAiB,CAAC,CAAC,CAACX,QAAQ,KAAI,IAAI;MAClE,IAAIA,QAAQ,KAAK,IAAI,CAACA,QAAQ,EAAE;QAAA,IAAAY,kBAAA;QAC9B,CAAAA,kBAAA,OAAI,CAACzB,YAAY,aAAjByB,kBAAA,CAAAC,IAAA,KAAI,EAAgBb,QAAQ,CAAC;QAC7B,IAAI,CAACA,QAAQ,GAAGA,QAAQ;MAC1B;MACA,IAAI,CAACD,SAAS,GAAGe,qBAAqB,CAAC,MAAM;QAC3C,IAAI,CAACL,KAAK,CAAC,CAAC;MACd,CAAC,CAAC;IACJ,CAAC,CAAC,OAAOM,KAAK,EAAE;MACd,IAAI,CAAChB,SAAS,GAAG,IAAI;MACrBiB,OAAO,CAACD,KAAK,CACX,yCAAyC,IAAI,CAACE,EAAE,YAC9CF,KAAK,YAAYG,KAAK,GAAGH,KAAK,CAACI,OAAO,GAAGJ,KAAK,EAElD,CAAC;IACH;EACF;;EAEA;EACA,IAAIK,WAAWA,CAAA,EAAG;IAChB,OAAO,IAAI,CAACvB,UAAU,CAACuB,WAAW;EACpC;EACA,IAAIA,WAAWA,CAACC,IAAyB,EAAE;IACzC,IAAI,CAACxB,UAAU,CAACuB,WAAW,GAAGC,IAAI;EACpC;EACA,IAAIC,SAASA,CAAA,EAAG;IACd,OAAO,IAAI,CAACzB,UAAU,CAACyB,SAAS;EAClC;EACA,IAAIA,SAASA,CAACD,IAAyB,EAAE;IACvC,IAAI,CAACxB,UAAU,CAACyB,SAAS,GAAGD,IAAI;EAClC;EACA,IAAIE,YAAYA,CAAA,EAAG;IACjB,OAAO,IAAI,CAAC1B,UAAU,CAAC0B,YAAY;EACrC;EACA,IAAIA,YAAYA,CAACC,KAAa,EAAE;IAC9B,IAAI,CAAC3B,UAAU,CAAC0B,YAAY,GAAGC,KAAK;EACtC;;EAEA;EACA,IAAIP,EAAEA,CAAA,EAAG;IACP,OAAO,IAAI,CAACpB,UAAU,CAACoB,EAAE;EAC3B;EACA,IAAIA,EAAEA,CAACQ,GAAW,EAAE;IAClB,IAAI,CAAC5B,UAAU,CAACoB,EAAE,GAAGQ,GAAG;EAC1B;EACA,IAAIhC,MAAMA,CAAA,EAAG;IACX,OAAO,IAAI,CAACI,UAAU,CAACJ,MAAM;EAC/B;EACA,IAAIA,MAAMA,CAACiC,CAAyB,EAAE;IACpC,IAAI,CAAC7B,UAAU,CAACJ,MAAM,GAAGiC,CAAC;EAC5B;EACA,IAAI9B,QAAQA,CAAA,EAAG;IACb,OAAO,IAAI,CAACC,UAAU,CAACD,QAAQ;EACjC;EACA,IAAIA,QAAQA,CAAC+B,EAA4B,EAAE;IACzC,IAAI,CAAC9B,UAAU,CAACD,QAAQ,GAAG+B,EAAE;EAC/B;;EAEA;EACA,IAAIC,QAAQA,CAAA,EAAG;IACb,OAAO,IAAI,CAAC/B,UAAU,CAAC+B,QAAQ;EACjC;EACA,IAAIC,OAAOA,CAAA,EAAG;IACZ,OAAO,IAAI,CAAChC,UAAU,CAACgC,OAAO;EAChC;EACA,IAAIC,SAASA,CAAA,EAAG;IACd,OAAO,IAAI,CAACjC,UAAU,CAACiC,SAAS;EAClC;EACA,IAAIC,KAAKA,CAAA,EAAG;IACV,OAAO,IAAI,CAAClC,UAAU,CAACkC,KAAK;EAC9B;EACA,IAAIC,YAAYA,CAAA,EAAG;IACjB,OAAO,IAAI,CAACnC,UAAU,CAACmC,YAAY;EACrC;;EAEA;EACA,IAAIC,QAAQA,CAAA,EAAG;IACb,OAAO,IAAI,CAACpC,UAAU,CAACoC,QAAQ;EACjC;EACA,IAAIA,QAAQA,CACVC,EAAiE,EACjE;IACA,IAAI,CAACrC,UAAU,CAACoC,QAAQ,GAAGC,EAAE;EAC/B;EACA,IAAIC,QAAQA,CAAA,EAAG;IACb,OAAO,IAAI,CAACtC,UAAU,CAACsC,QAAQ;EACjC;EACA,IAAIA,QAAQA,CACVD,EAAiE,EACjE;IACA,IAAI,CAACrC,UAAU,CAACsC,QAAQ,GAAGD,EAAE;EAC/B;EACA,IAAIE,QAAQA,CAAA,EAAG;IACb,OAAO,IAAI,CAACvC,UAAU,CAACuC,QAAQ;EACjC;EACA,IAAIA,QAAQA,CAACF,EAAgD,EAAE;IAC7D,IAAI,CAACrC,UAAU,CAACuC,QAAQ,GAAGF,EAAE;EAC/B;;EAEA;EACAG,IAAIA,CAAA,EAAG;IACL,IAAI,CAACxC,UAAU,CAACwC,IAAI,CAAC,CAAC;IACtBC,oBAAoB,CAAC,IAAI,CAACvC,SAAU,CAAC;IACrC,IAAI,CAACA,SAAS,GAAGe,qBAAqB,CAAC,MAAM,IAAI,CAACL,KAAK,CAAC,CAAC,CAAC;EAC5D;EAEA8B,KAAKA,CAAA,EAAG;IACN,IAAI,CAAC1C,UAAU,CAAC0C,KAAK,CAAC,CAAC;IACvBD,oBAAoB,CAAC,IAAI,CAACvC,SAAU,CAAC;IACrC,IAAI,CAACA,SAAS,GAAG,IAAI;EACvB;EAEAQ,MAAMA,CAAA,EAAG;IACP,IAAI,CAACiC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAACvC,cAAc,CAAC;IACvD,IAAI,CAACuC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAACvC,cAAc,CAAC;IACvD,IAAI,CAACJ,UAAU,CAACU,MAAM,CAAC,CAAC;IACxB;IACA,IAAI,CAACpB,YAAY,CAAC,IAAI,CAAC;IACvBmD,oBAAoB,CAAC,IAAI,CAACvC,SAAU,CAAC;IACrC,IAAI,CAACA,SAAS,GAAG,IAAI;EACvB;EAEA0C,YAAYA,CAAA,EAAG;IACbzB,OAAO,CAAC0B,IAAI,CACV,4FACF,CAAC;EACH;;EAEA;EACAC,MAAMA,CAAA,EAAG;IACP,IAAI,CAAC9C,UAAU,CAAC8C,MAAM,CAAC,CAAC;EAC1B;EACAC,OAAOA,CAAA,EAAG;IACR,IAAI,CAAC/C,UAAU,CAAC+C,OAAO,CAAC,CAAC;EAC3B;EACAC,OAAOA,CAAA,EAAG;IACR,IAAI,CAAChD,UAAU,CAACgD,OAAO,CAAC,CAAC;EAC3B;EACAC,kBAAkBA,CAACvB,YAAoB,EAAE;IACvC,IAAI,CAAC1B,UAAU,CAACiD,kBAAkB,CAACvB,YAAY,CAAC;EAClD;;EAEA;EACAf,gBAAgBA,CACduC,IAAY,EACZC,QAA4C,EAC5CC,OAA2C,EAC3C;IACA,IAAI,CAACpD,UAAU,CAACW,gBAAgB,CAACuC,IAAI,EAAEC,QAAQ,EAAEC,OAAO,CAAC;EAC3D;EACAT,mBAAmBA,CACjBO,IAAY,EACZC,QAA4C,EAC5CC,OAA2C,EAC3C;IACA,IAAI,CAACpD,UAAU,CAAC2C,mBAAmB,CAACO,IAAI,EAAEC,QAAQ,EAAEC,OAAO,CAAC;EAC9D;EACAC,aAAaA,CAACC,KAAY,EAAE;IAC1B,OAAO,IAAI,CAACtD,UAAU,CAACqD,aAAa,CAACC,KAAK,CAAC;EAC7C;AACF;AAACC,OAAA,CAAAnE,eAAA,GAAAA,eAAA","ignoreList":[]}

package/dist/cjs/api/webAnimations.js

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.getWebAnimation = getWebAnimation;
+var _CustomAnimation = require("../CustomAnimation");
 var _AnimationGroup = require("../AnimationGroup");
 var _common = require("./common");
 var _fastdom = _interopRequireDefault(require("fastdom"));
@@ -87,7 +88,10 @@ function getWebAnimation(target, animationOptions, trigger, options, ownerDocume
       }
       keyframeEffect.setKeyframes(effect.keyframes);
     });
-    const animation = isViewProgress && timeline ? new Animation(keyframeEffect, timeline) : new Animation(keyframeEffect);
+    const timingOptions = isViewProgress && timeline ? {
+      timeline: timeline
+    } : {};
+    const animation = typeof effect.customEffect === 'function' ? new _CustomAnimation.CustomAnimation(effect.customEffect, effectTarget || null, effectOptions, timingOptions) : new Animation(keyframeEffect, timingOptions.timeline);
 
     // if this is a ScrubAnimation with view-progress trigger and the browser supports the ViewTimeline API
     if (isViewProgress) {

package/dist/cjs/api/webAnimations.js.map

@@ -1 +1 @@
-{"version":3,"names":["_AnimationGroup","require","_common","_fastdom","_interopRequireDefault","getWebAnimationEffect","preset","animation","target","options","type","duration","reducedMotion","iterations","undefined","domApi","HTMLElement","measure","mutate","web","getWebAnimation","animationOptions","trigger","ownerDocument","element","getElement","effectOptions","customEffect","namedEffect","id","mouseAnimationPreset","getNamedEffect","mouseAnimationFactory","animationsData","data","getEffectsData","effectId","timeline","isViewProgress","window","ViewTimeline","subject","componentId","animations","map","effect","part","effectTarget","querySelector","keyframeEffect","KeyframeEffect","fastdom","updateTiming","timing","setKeyframes","keyframes","Animation","start","end","getRanges","rangeStart","rangeEnd","play","startOffset","endOffset","_offset","_offset2","startOffsetToWrite","endOffsetToWrite","Object","assign","name","offset","value","add","startOffsetAdd","endOffsetAdd","AnimationGroup","measured","Promise","resolve"],"sources":["../../../src/api/webAnimations.ts"],"sourcesContent":["import type {\n  AnimationData,\n  AnimationDataForScrub,\n  AnimationEffectAPI,\n  AnimationOptions,\n  MouseAnimationFactory,\n  MouseAnimationInstance,\n  ScrubAnimationOptions,\n  TriggerVariant,\n  WebAnimationEffectFactory,\n} from '../types';\nimport { AnimationGroup } from '../AnimationGroup';\nimport {\n  getElement,\n  measure,\n  mutate,\n  getRanges,\n  getNamedEffect,\n  getEffectsData,\n} from './common';\nimport fastdom from 'fastdom';\n\nfunction getWebAnimationEffect(\n  preset: AnimationEffectAPI<any> | WebAnimationEffectFactory<any> | null,\n  animation: AnimationOptions,\n  target: HTMLElement | string | null,\n  options?: Record<string, any>,\n): AnimationData[] | MouseAnimationFactory {\n  if (preset) {\n    // validate duration is a number over 0\n    if (animation.type === 'TimeAnimationOptions') {\n      animation.duration = animation.duration || 1;\n\n      if (options?.reducedMotion) {\n        if (animation.iterations === 1 || animation.iterations == undefined) {\n          animation = { ...animation, duration: 1 };\n        } else {\n          return [];\n        }\n      }\n    }\n\n    let domApi;\n    if (target instanceof HTMLElement) {\n      domApi = { measure: measure(target), mutate: mutate(target) };\n    }\n\n    return (preset as AnimationEffectAPI<any>).web\n      ? (preset as AnimationEffectAPI<any>).web(animation, domApi, options)\n      : (preset as WebAnimationEffectFactory<any>)(animation, domApi, options);\n  }\n\n  return [];\n}\n\nfunction getWebAnimation(\n  target: HTMLElement | string | null,\n  animationOptions: AnimationOptions,\n  trigger?: Partial<TriggerVariant> & { element?: HTMLElement },\n  options?: Record<string, any>,\n  ownerDocument?: Document,\n): AnimationGroup | MouseAnimationInstance {\n  const element =\n    target instanceof HTMLElement ? target : getElement(target, ownerDocument);\n\n  if (trigger?.trigger === 'pointer-move') {\n    let effectOptions = animationOptions;\n\n    if (animationOptions.customEffect) {\n      effectOptions = {\n        ...animationOptions,\n        namedEffect: { id: '', type: 'CustomMouse' },\n      };\n    }\n\n    // TODO: need to fix the type here, currently lying about the returned type to be WebAnimationEffectFactory instead of MouseAnimationFactoryCreate\n    const mouseAnimationPreset = getNamedEffect(\n      effectOptions,\n    ) as WebAnimationEffectFactory<'scrub'>;\n    const mouseAnimationFactory = getWebAnimationEffect(\n      mouseAnimationPreset,\n      animationOptions,\n      element,\n      options,\n    ) as MouseAnimationFactory;\n\n    return mouseAnimationFactory(element as HTMLElement);\n  }\n\n  // get the preset for the given animation options\n  const namedEffect = getNamedEffect(\n    animationOptions,\n  ) as AnimationEffectAPI<any> | null;\n\n  const animationsData = getWebAnimationEffect(\n    namedEffect,\n    animationOptions,\n    element,\n    options,\n  ) as AnimationData[];\n  const data = getEffectsData(animationsData, animationOptions.effectId);\n\n  let timeline: typeof window.ViewTimeline | undefined;\n  const isViewProgress = trigger?.trigger === 'view-progress';\n\n  // if this is a ScrubAnimation with view-progress trigger and the browser supports the ViewTimeline API\n  if (isViewProgress && window.ViewTimeline) {\n    // generate the timeline object\n    // @ts-expect-error\n    timeline = new ViewTimeline({\n      subject: trigger.element || getElement(trigger.componentId!),\n    });\n  }\n\n  // generate an Animation object for each data object\n  const animations = data.map(\n    ({ effect, options: effectOptions, id, part }) => {\n      const effectTarget = part\n        ? element?.querySelector(`[data-motion-part~=\"${part}\"]`) // maybe add ~ here as well\n        : element;\n\n      const keyframeEffect = new KeyframeEffect(\n        effectTarget || null,\n        [],\n        effectOptions,\n      );\n\n      // set the keyframes for the KeyframeEffect after measurements and mutations\n      fastdom.mutate(() => {\n        if ('timing' in effect) {\n          keyframeEffect.updateTiming(effect.timing as OptionalEffectTiming);\n        }\n\n        keyframeEffect.setKeyframes(effect.keyframes);\n      });\n\n      const animation: Animation =\n        isViewProgress && timeline\n          ? new Animation(keyframeEffect, timeline as AnimationTimeline)\n          : new Animation(keyframeEffect);\n\n      // if this is a ScrubAnimation with view-progress trigger and the browser supports the ViewTimeline API\n      if (isViewProgress) {\n        if (timeline) {\n          // set the ranges for the animation after measurements and mutations\n          fastdom.mutate(() => {\n            const { start, end } = getRanges(effect as AnimationDataForScrub);\n            // @ts-expect-error\n            animation.rangeStart = start;\n            // @ts-expect-error\n            animation.rangeEnd = end;\n\n            animation.play();\n          });\n        } else {\n          const { startOffset, endOffset } =\n            animationOptions as ScrubAnimationOptions;\n\n          // set the ranges for the animation after measurements and mutations\n          fastdom.mutate(() => {\n            const startOffsetToWrite =\n              (effect as AnimationDataForScrub).startOffset || startOffset;\n            const endOffsetToWrite =\n              (effect as AnimationDataForScrub).endOffset || endOffset;\n\n            Object.assign(animation, {\n              start: {\n                name: startOffsetToWrite!.name,\n                offset: startOffsetToWrite!.offset?.value,\n                add: (effect as AnimationDataForScrub)!.startOffsetAdd,\n              },\n              end: {\n                name: endOffsetToWrite!.name,\n                offset: endOffsetToWrite!.offset?.value,\n                add: (effect as AnimationDataForScrub)!.endOffsetAdd,\n              },\n            });\n          });\n        }\n      }\n\n      if (id) {\n        animation.id = id;\n      }\n\n      return animation;\n    },\n  );\n\n  // create an AnimationGroup with the generate animations\n  return new AnimationGroup(animations, {\n    ...animationOptions,\n    trigger: { ...(trigger || ({} as Partial<TriggerVariant>)) },\n    // make sure the group is ready after all animation targets are measured and mutated\n    measured: new Promise((resolve) => fastdom.mutate(resolve)),\n  });\n}\n\nexport { getWebAnimation };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_CustomAnimation","require","_AnimationGroup","_common","_fastdom","_interopRequireDefault","getWebAnimationEffect","preset","animation","target","options","type","duration","reducedMotion","iterations","undefined","domApi","HTMLElement","measure","mutate","web","getWebAnimation","animationOptions","trigger","ownerDocument","element","getElement","effectOptions","customEffect","namedEffect","id","mouseAnimationPreset","getNamedEffect","mouseAnimationFactory","animationsData","data","getEffectsData","effectId","timeline","isViewProgress","window","ViewTimeline","subject","componentId","animations","map","effect","part","effectTarget","querySelector","keyframeEffect","KeyframeEffect","fastdom","updateTiming","timing","setKeyframes","keyframes","timingOptions","CustomAnimation","Animation","start","end","getRanges","rangeStart","rangeEnd","play","startOffset","endOffset","_offset","_offset2","startOffsetToWrite","endOffsetToWrite","Object","assign","name","offset","value","add","startOffsetAdd","endOffsetAdd","AnimationGroup","measured","Promise","resolve"],"sources":["../../../src/api/webAnimations.ts"],"sourcesContent":["import type {\n  AnimationData,\n  AnimationDataForScrub,\n  AnimationEffectAPI,\n  AnimationOptions,\n  MouseAnimationFactory,\n  MouseAnimationInstance,\n  ScrubAnimationOptions,\n  TriggerVariant,\n  WebAnimationEffectFactory,\n} from '../types';\nimport { CustomAnimation } from '../CustomAnimation';\nimport { AnimationGroup } from '../AnimationGroup';\nimport {\n  getElement,\n  measure,\n  mutate,\n  getRanges,\n  getNamedEffect,\n  getEffectsData,\n} from './common';\nimport fastdom from 'fastdom';\n\nfunction getWebAnimationEffect(\n  preset: AnimationEffectAPI<any> | WebAnimationEffectFactory<any> | null,\n  animation: AnimationOptions,\n  target: HTMLElement | string | null,\n  options?: Record<string, any>,\n): AnimationData[] | MouseAnimationFactory {\n  if (preset) {\n    // validate duration is a number over 0\n    if (animation.type === 'TimeAnimationOptions') {\n      animation.duration = animation.duration || 1;\n\n      if (options?.reducedMotion) {\n        if (animation.iterations === 1 || animation.iterations == undefined) {\n          animation = { ...animation, duration: 1 };\n        } else {\n          return [];\n        }\n      }\n    }\n\n    let domApi;\n    if (target instanceof HTMLElement) {\n      domApi = { measure: measure(target), mutate: mutate(target) };\n    }\n\n    return (preset as AnimationEffectAPI<any>).web\n      ? (preset as AnimationEffectAPI<any>).web(animation, domApi, options)\n      : (preset as WebAnimationEffectFactory<any>)(animation, domApi, options);\n  }\n\n  return [];\n}\n\nfunction getWebAnimation(\n  target: HTMLElement | string | null,\n  animationOptions: AnimationOptions,\n  trigger?: Partial<TriggerVariant> & { element?: HTMLElement },\n  options?: Record<string, any>,\n  ownerDocument?: Document,\n): AnimationGroup | MouseAnimationInstance {\n  const element =\n    target instanceof HTMLElement ? target : getElement(target, ownerDocument);\n\n  if (trigger?.trigger === 'pointer-move') {\n    let effectOptions = animationOptions;\n\n    if (animationOptions.customEffect) {\n      effectOptions = {\n        ...animationOptions,\n        namedEffect: { id: '', type: 'CustomMouse' },\n      };\n    }\n\n    // TODO: need to fix the type here, currently lying about the returned type to be WebAnimationEffectFactory instead of MouseAnimationFactoryCreate\n    const mouseAnimationPreset = getNamedEffect(\n      effectOptions,\n    ) as WebAnimationEffectFactory<'scrub'>;\n    const mouseAnimationFactory = getWebAnimationEffect(\n      mouseAnimationPreset,\n      animationOptions,\n      element,\n      options,\n    ) as MouseAnimationFactory;\n\n    return mouseAnimationFactory(element as HTMLElement);\n  }\n\n  // get the preset for the given animation options\n  const namedEffect = getNamedEffect(\n    animationOptions,\n  ) as AnimationEffectAPI<any> | null;\n\n  const animationsData = getWebAnimationEffect(\n    namedEffect,\n    animationOptions,\n    element,\n    options,\n  ) as AnimationData[];\n  const data = getEffectsData(animationsData, animationOptions.effectId);\n\n  let timeline: typeof window.ViewTimeline | undefined;\n  const isViewProgress = trigger?.trigger === 'view-progress';\n\n  // if this is a ScrubAnimation with view-progress trigger and the browser supports the ViewTimeline API\n  if (isViewProgress && window.ViewTimeline) {\n    // generate the timeline object\n    // @ts-expect-error\n    timeline = new ViewTimeline({\n      subject: trigger.element || getElement(trigger.componentId!),\n    });\n  }\n\n  // generate an Animation object for each data object\n  const animations = data.map(\n    ({ effect, options: effectOptions, id, part }) => {\n      const effectTarget = part\n        ? element?.querySelector(`[data-motion-part~=\"${part}\"]`) // maybe add ~ here as well\n        : element;\n\n      const keyframeEffect = new KeyframeEffect(\n        effectTarget || null,\n        [],\n        effectOptions,\n      );\n\n      // set the keyframes for the KeyframeEffect after measurements and mutations\n      fastdom.mutate(() => {\n        if ('timing' in effect) {\n          keyframeEffect.updateTiming(effect.timing as OptionalEffectTiming);\n        }\n\n        keyframeEffect.setKeyframes(effect.keyframes);\n      });\n\n      const timingOptions =\n        isViewProgress && timeline\n          ? { timeline: timeline as AnimationTimeline }\n          : {};\n      const animation =\n        typeof effect.customEffect === 'function'\n          ? (new CustomAnimation(\n              effect.customEffect,\n              effectTarget || null,\n              effectOptions,\n              timingOptions,\n            ) as Animation)\n          : new Animation(keyframeEffect, timingOptions.timeline);\n\n      // if this is a ScrubAnimation with view-progress trigger and the browser supports the ViewTimeline API\n      if (isViewProgress) {\n        if (timeline) {\n          // set the ranges for the animation after measurements and mutations\n          fastdom.mutate(() => {\n            const { start, end } = getRanges(effect as AnimationDataForScrub);\n            // @ts-expect-error\n            animation.rangeStart = start;\n            // @ts-expect-error\n            animation.rangeEnd = end;\n\n            animation.play();\n          });\n        } else {\n          const { startOffset, endOffset } =\n            animationOptions as ScrubAnimationOptions;\n\n          // set the ranges for the animation after measurements and mutations\n          fastdom.mutate(() => {\n            const startOffsetToWrite =\n              (effect as AnimationDataForScrub).startOffset || startOffset;\n            const endOffsetToWrite =\n              (effect as AnimationDataForScrub).endOffset || endOffset;\n\n            Object.assign(animation, {\n              start: {\n                name: startOffsetToWrite!.name,\n                offset: startOffsetToWrite!.offset?.value,\n                add: (effect as AnimationDataForScrub)!.startOffsetAdd,\n              },\n              end: {\n                name: endOffsetToWrite!.name,\n                offset: endOffsetToWrite!.offset?.value,\n                add: (effect as AnimationDataForScrub)!.endOffsetAdd,\n              },\n            });\n          });\n        }\n      }\n\n      if (id) {\n        animation.id = id;\n      }\n\n      return animation;\n    },\n  );\n\n  // create an AnimationGroup with the generate animations\n  return new AnimationGroup(animations, {\n    ...animationOptions,\n    trigger: { ...(trigger || ({} as Partial<TriggerVariant>)) },\n    // make sure the group is ready after all animation targets are measured and mutated\n    measured: new Promise((resolve) => fastdom.mutate(resolve)),\n  });\n}\n\nexport { getWebAnimation };\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/library/mouse/CustomMouse.js

@@ -35,6 +35,9 @@ class CustomMouse {
       v,
       active
     };
+    if (typeof this.options.customEffect === 'function') {
+      this.options.customEffect(this.target, this.currentProgress);
+    }
   }
   cancel() {
     this.currentProgress = {

package/dist/cjs/library/mouse/CustomMouse.js.map

@@ -1 +1 @@
-{"version":3,"names":["CustomMouse","constructor","target","options","_defineProperty2","default","currentProgress","x","y","v","active","play","progress","cancel","getProgress","transition","style","exports","create"],"sources":["../../../../src/library/mouse/CustomMouse.ts"],"sourcesContent":["import type {\n  AnimationExtraOptions,\n  Progress,\n  ScrubAnimationOptions,\n} from '../../types';\n\nexport class CustomMouse {\n  target: HTMLElement;\n  options: Record<string, any>;\n  currentProgress: Progress;\n\n  constructor(target: HTMLElement, options?: Record<string, any>) {\n    this.target = target;\n    this.options = options || {};\n    this.currentProgress = { x: 0.5, y: 0.5, v: { x: 0, y: 0 }, active: true };\n\n    this.play();\n  }\n\n  progress({ x, y, v, active }: Progress) {\n    this.currentProgress = { x, y, v, active };\n  }\n\n  cancel() {\n    this.currentProgress = { x: 0.5, y: 0.5, v: { x: 0, y: 0 } };\n  }\n\n  getProgress() {\n    return this.currentProgress;\n  }\n\n  play() {\n    if (this.options.transition && this.target) {\n      this.target.style.transition = this.options.transition;\n    }\n  }\n}\n\nexport function create(options: ScrubAnimationOptions & AnimationExtraOptions) {\n  return (target: HTMLElement) => new CustomMouse(target, options);\n}\n"],"mappings":";;;;;;;AAMO,MAAMA,WAAW,CAAC;EAKvBC,WAAWA,CAACC,MAAmB,EAAEC,OAA6B,EAAE;IAAA,IAAAC,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAC9D,IAAI,CAACH,MAAM,GAAGA,MAAM;IACpB,IAAI,CAACC,OAAO,GAAGA,OAAO,IAAI,CAAC,CAAC;IAC5B,IAAI,CAACG,eAAe,GAAG;MAAEC,CAAC,EAAE,GAAG;MAAEC,CAAC,EAAE,GAAG;MAAEC,CAAC,EAAE;QAAEF,CAAC,EAAE,CAAC;QAAEC,CAAC,EAAE;MAAE,CAAC;MAAEE,MAAM,EAAE;IAAK,CAAC;IAE1E,IAAI,CAACC,IAAI,CAAC,CAAC;EACb;EAEAC,QAAQA,CAAC;IAAEL,CAAC;IAAEC,CAAC;IAAEC,CAAC;IAAEC;EAAiB,CAAC,EAAE;IACtC,IAAI,CAACJ,eAAe,GAAG;MAAEC,CAAC;MAAEC,CAAC;MAAEC,CAAC;MAAEC;IAAO,CAAC;EAC5C;EAEAG,MAAMA,CAAA,EAAG;IACP,IAAI,CAACP,eAAe,GAAG;MAAEC,CAAC,EAAE,GAAG;MAAEC,CAAC,EAAE,GAAG;MAAEC,CAAC,EAAE;QAAEF,CAAC,EAAE,CAAC;QAAEC,CAAC,EAAE;MAAE;IAAE,CAAC;EAC9D;EAEAM,WAAWA,CAAA,EAAG;IACZ,OAAO,IAAI,CAACR,eAAe;EAC7B;EAEAK,IAAIA,CAAA,EAAG;IACL,IAAI,IAAI,CAACR,OAAO,CAACY,UAAU,IAAI,IAAI,CAACb,MAAM,EAAE;MAC1C,IAAI,CAACA,MAAM,CAACc,KAAK,CAACD,UAAU,GAAG,IAAI,CAACZ,OAAO,CAACY,UAAU;IACxD;EACF;AACF;AAACE,OAAA,CAAAjB,WAAA,GAAAA,WAAA;AAEM,SAASkB,MAAMA,CAACf,OAAsD,EAAE;EAC7E,OAAQD,MAAmB,IAAK,IAAIF,WAAW,CAACE,MAAM,EAAEC,OAAO,CAAC;AAClE","ignoreList":[]}
+{"version":3,"names":["CustomMouse","constructor","target","options","_defineProperty2","default","currentProgress","x","y","v","active","play","progress","customEffect","cancel","getProgress","transition","style","exports","create"],"sources":["../../../../src/library/mouse/CustomMouse.ts"],"sourcesContent":["import type {\n  AnimationExtraOptions,\n  Progress,\n  ScrubAnimationOptions,\n} from '../../types';\n\nexport class CustomMouse {\n  target: HTMLElement;\n  options: Record<string, any>;\n  currentProgress: Progress;\n\n  constructor(target: HTMLElement, options?: Record<string, any>) {\n    this.target = target;\n    this.options = options || {};\n    this.currentProgress = { x: 0.5, y: 0.5, v: { x: 0, y: 0 }, active: true };\n\n    this.play();\n  }\n\n  progress({ x, y, v, active }: Progress) {\n    this.currentProgress = { x, y, v, active };\n    if (typeof this.options.customEffect === 'function') {\n      this.options.customEffect(this.target, this.currentProgress);\n    }\n  }\n\n  cancel() {\n    this.currentProgress = { x: 0.5, y: 0.5, v: { x: 0, y: 0 } };\n  }\n\n  getProgress() {\n    return this.currentProgress;\n  }\n\n  play() {\n    if (this.options.transition && this.target) {\n      this.target.style.transition = this.options.transition;\n    }\n  }\n}\n\nexport function create(options: ScrubAnimationOptions & AnimationExtraOptions) {\n  return (target: HTMLElement) => new CustomMouse(target, options);\n}\n"],"mappings":";;;;;;;AAMO,MAAMA,WAAW,CAAC;EAKvBC,WAAWA,CAACC,MAAmB,EAAEC,OAA6B,EAAE;IAAA,IAAAC,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAC9D,IAAI,CAACH,MAAM,GAAGA,MAAM;IACpB,IAAI,CAACC,OAAO,GAAGA,OAAO,IAAI,CAAC,CAAC;IAC5B,IAAI,CAACG,eAAe,GAAG;MAAEC,CAAC,EAAE,GAAG;MAAEC,CAAC,EAAE,GAAG;MAAEC,CAAC,EAAE;QAAEF,CAAC,EAAE,CAAC;QAAEC,CAAC,EAAE;MAAE,CAAC;MAAEE,MAAM,EAAE;IAAK,CAAC;IAE1E,IAAI,CAACC,IAAI,CAAC,CAAC;EACb;EAEAC,QAAQA,CAAC;IAAEL,CAAC;IAAEC,CAAC;IAAEC,CAAC;IAAEC;EAAiB,CAAC,EAAE;IACtC,IAAI,CAACJ,eAAe,GAAG;MAAEC,CAAC;MAAEC,CAAC;MAAEC,CAAC;MAAEC;IAAO,CAAC;IAC1C,IAAI,OAAO,IAAI,CAACP,OAAO,CAACU,YAAY,KAAK,UAAU,EAAE;MACnD,IAAI,CAACV,OAAO,CAACU,YAAY,CAAC,IAAI,CAACX,MAAM,EAAE,IAAI,CAACI,eAAe,CAAC;IAC9D;EACF;EAEAQ,MAAMA,CAAA,EAAG;IACP,IAAI,CAACR,eAAe,GAAG;MAAEC,CAAC,EAAE,GAAG;MAAEC,CAAC,EAAE,GAAG;MAAEC,CAAC,EAAE;QAAEF,CAAC,EAAE,CAAC;QAAEC,CAAC,EAAE;MAAE;IAAE,CAAC;EAC9D;EAEAO,WAAWA,CAAA,EAAG;IACZ,OAAO,IAAI,CAACT,eAAe;EAC7B;EAEAK,IAAIA,CAAA,EAAG;IACL,IAAI,IAAI,CAACR,OAAO,CAACa,UAAU,IAAI,IAAI,CAACd,MAAM,EAAE;MAC1C,IAAI,CAACA,MAAM,CAACe,KAAK,CAACD,UAAU,GAAG,IAAI,CAACb,OAAO,CAACa,UAAU;IACxD;EACF;AACF;AAACE,OAAA,CAAAlB,WAAA,GAAAA,WAAA;AAEM,SAASmB,MAAMA,CAAChB,OAAsD,EAAE;EAC7E,OAAQD,MAAmB,IAAK,IAAIF,WAAW,CAACE,MAAM,EAAEC,OAAO,CAAC;AAClE","ignoreList":[]}

package/dist/esm/CustomAnimation.js

@@ -0,0 +1,184 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/**
+ * @class CustomAnimation
+ *
+ * A wrapper object for Animation that mimics the same interface but implements CustomEffect that runs JS code instead of KeyframeEffect.
+ * The class is implemented by holding an inner Animation object instead of inheritance due to some browsers not allowing extension of built-in objects.
+ */
+export class CustomAnimation {
+  constructor(customEffect, target, effectOptions, timingOptions) {
+    _defineProperty(this, "_animation", void 0);
+    _defineProperty(this, "customEffect", void 0);
+    _defineProperty(this, "progress", void 0);
+    _defineProperty(this, "_tickCbId", void 0);
+    _defineProperty(this, "_finishHandler", void 0);
+    // overriding composite so that animation is not replaced and removed
+    const effect = new KeyframeEffect(target, [], {
+      ...effectOptions,
+      composite: 'add'
+    });
+    const {
+      timeline
+    } = timingOptions;
+    this._animation = new Animation(effect, timeline);
+    this._tickCbId = null;
+    this.progress = null;
+    this.customEffect = progress => customEffect(effect.target, progress);
+
+    // stop loop if animation is removed from the DOM after finish (does not fire 'remove' event)
+    this._finishHandler = _ => {
+      var _target;
+      if (!((_target = this.effect.target) != null && _target.getAnimations().find(a => a === this._animation))) {
+        this.cancel();
+      }
+    };
+    this.addEventListener('finish', this._finishHandler);
+    this.addEventListener('remove', this._finishHandler);
+  }
+
+  // private tick method for customEffect loop implementation
+  _tick() {
+    try {
+      var _this$effect;
+      const progress = ((_this$effect = this.effect) == null ? void 0 : _this$effect.getComputedTiming().progress) ?? null;
+      if (progress !== this.progress) {
+        var _this$customEffect;
+        (_this$customEffect = this.customEffect) == null || _this$customEffect.call(this, progress);
+        this.progress = progress;
+      }
+      this._tickCbId = requestAnimationFrame(() => {
+        this._tick();
+      });
+    } catch (error) {
+      this._tickCbId = null;
+      console.error(`failed to run customEffect! effectId: ${this.id}, error: ${error instanceof Error ? error.message : error}`);
+    }
+  }
+
+  // Animation timing properties
+  get currentTime() {
+    return this._animation.currentTime;
+  }
+  set currentTime(time) {
+    this._animation.currentTime = time;
+  }
+  get startTime() {
+    return this._animation.startTime;
+  }
+  set startTime(time) {
+    this._animation.startTime = time;
+  }
+  get playbackRate() {
+    return this._animation.playbackRate;
+  }
+  set playbackRate(speed) {
+    this._animation.playbackRate = speed;
+  }
+
+  // Animation basic properties
+  get id() {
+    return this._animation.id;
+  }
+  set id(uid) {
+    this._animation.id = uid;
+  }
+  get effect() {
+    return this._animation.effect;
+  }
+  set effect(e) {
+    this._animation.effect = e;
+  }
+  get timeline() {
+    return this._animation.timeline;
+  }
+  set timeline(tl) {
+    this._animation.timeline = tl;
+  }
+
+  // Animation readonly state properties
+  get finished() {
+    return this._animation.finished;
+  }
+  get pending() {
+    return this._animation.pending;
+  }
+  get playState() {
+    return this._animation.playState;
+  }
+  get ready() {
+    return this._animation.ready;
+  }
+  get replaceState() {
+    return this._animation.replaceState;
+  }
+
+  // Animation event handlers
+  get oncancel() {
+    return this._animation.oncancel;
+  }
+  set oncancel(cb) {
+    this._animation.oncancel = cb;
+  }
+  get onfinish() {
+    return this._animation.onfinish;
+  }
+  set onfinish(cb) {
+    this._animation.onfinish = cb;
+  }
+  get onremove() {
+    return this._animation.onremove;
+  }
+  set onremove(cb) {
+    this._animation.onremove = cb;
+  }
+
+  // CustomAnimation overridden methods
+  play() {
+    this._animation.play();
+    cancelAnimationFrame(this._tickCbId);
+    this._tickCbId = requestAnimationFrame(() => this._tick());
+  }
+  pause() {
+    this._animation.pause();
+    cancelAnimationFrame(this._tickCbId);
+    this._tickCbId = null;
+  }
+  cancel() {
+    this.removeEventListener('finish', this._finishHandler);
+    this.removeEventListener('remove', this._finishHandler);
+    this._animation.cancel();
+    // signaling cancelation for customEffect to handle it as desired
+    this.customEffect(null);
+    cancelAnimationFrame(this._tickCbId);
+    this._tickCbId = null;
+  }
+  commitStyles() {
+    console.warn('CustomEffect animations do not support commitStyles method as they have no style to commit');
+  }
+
+  // Animation methods without override
+  finish() {
+    this._animation.finish();
+  }
+  persist() {
+    this._animation.persist();
+  }
+  reverse() {
+    this._animation.reverse();
+  }
+  updatePlaybackRate(playbackRate) {
+    this._animation.updatePlaybackRate(playbackRate);
+  }
+
+  // Animation events API
+  addEventListener(type, listener, options) {
+    this._animation.addEventListener(type, listener, options);
+  }
+  removeEventListener(type, listener, options) {
+    this._animation.removeEventListener(type, listener, options);
+  }
+  dispatchEvent(event) {
+    return this._animation.dispatchEvent(event);
+  }
+}
+//# sourceMappingURL=CustomAnimation.js.map

package/dist/esm/CustomAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CustomAnimation","constructor","customEffect","target","effectOptions","timingOptions","_defineProperty","effect","KeyframeEffect","composite","timeline","_animation","Animation","_tickCbId","progress","_finishHandler","_","_target","getAnimations","find","a","cancel","addEventListener","_tick","_this$effect","getComputedTiming","_this$customEffect","call","requestAnimationFrame","error","console","id","Error","message","currentTime","time","startTime","playbackRate","speed","uid","e","tl","finished","pending","playState","ready","replaceState","oncancel","cb","onfinish","onremove","play","cancelAnimationFrame","pause","removeEventListener","commitStyles","warn","finish","persist","reverse","updatePlaybackRate","type","listener","options","dispatchEvent","event"],"sources":["../../src/CustomAnimation.ts"],"sourcesContent":["/**\n * @class CustomAnimation\n *\n * A wrapper object for Animation that mimics the same interface but implements CustomEffect that runs JS code instead of KeyframeEffect.\n * The class is implemented by holding an inner Animation object instead of inheritance due to some browsers not allowing extension of built-in objects.\n */\nexport class CustomAnimation {\n  _animation: Animation;\n  customEffect: (progress: number | null) => void;\n  progress: number | null;\n  _tickCbId: number | null;\n  _finishHandler: (_: any) => void;\n\n  constructor(\n    customEffect: (element: Element | null, progress: number | null) => void,\n    target: Element | null,\n    effectOptions: KeyframeEffectOptions,\n    timingOptions: { timeline?: AnimationTimeline | null },\n  ) {\n    // overriding composite so that animation is not replaced and removed\n    const effect = new KeyframeEffect(target, [], {\n      ...effectOptions,\n      composite: 'add',\n    });\n    const { timeline } = timingOptions;\n    this._animation = new Animation(effect, timeline);\n\n    this._tickCbId = null;\n    this.progress = null;\n    this.customEffect = (progress: number | null) =>\n      customEffect(effect.target, progress);\n\n    // stop loop if animation is removed from the DOM after finish (does not fire 'remove' event)\n    this._finishHandler = (_: any) => {\n      if (\n        !(this.effect as KeyframeEffect).target\n          ?.getAnimations()\n          .find((a) => a === this._animation)\n      ) {\n        this.cancel();\n      }\n    };\n    this.addEventListener('finish', this._finishHandler);\n    this.addEventListener('remove', this._finishHandler);\n  }\n\n  // private tick method for customEffect loop implementation\n  private _tick() {\n    try {\n      const progress = this.effect?.getComputedTiming().progress ?? null;\n      if (progress !== this.progress) {\n        this.customEffect?.(progress);\n        this.progress = progress;\n      }\n      this._tickCbId = requestAnimationFrame(() => {\n        this._tick();\n      });\n    } catch (error) {\n      this._tickCbId = null;\n      console.error(\n        `failed to run customEffect! effectId: ${this.id}, error: ${\n          error instanceof Error ? error.message : error\n        }`,\n      );\n    }\n  }\n\n  // Animation timing properties\n  get currentTime() {\n    return this._animation.currentTime;\n  }\n  set currentTime(time: CSSNumberish | null) {\n    this._animation.currentTime = time;\n  }\n  get startTime() {\n    return this._animation.startTime;\n  }\n  set startTime(time: CSSNumberish | null) {\n    this._animation.startTime = time;\n  }\n  get playbackRate() {\n    return this._animation.playbackRate;\n  }\n  set playbackRate(speed: number) {\n    this._animation.playbackRate = speed;\n  }\n\n  // Animation basic properties\n  get id() {\n    return this._animation.id;\n  }\n  set id(uid: string) {\n    this._animation.id = uid;\n  }\n  get effect() {\n    return this._animation.effect;\n  }\n  set effect(e: AnimationEffect | null) {\n    this._animation.effect = e;\n  }\n  get timeline() {\n    return this._animation.timeline;\n  }\n  set timeline(tl: AnimationTimeline | null) {\n    this._animation.timeline = tl;\n  }\n\n  // Animation readonly state properties\n  get finished() {\n    return this._animation.finished;\n  }\n  get pending() {\n    return this._animation.pending;\n  }\n  get playState() {\n    return this._animation.playState;\n  }\n  get ready() {\n    return this._animation.ready;\n  }\n  get replaceState() {\n    return this._animation.replaceState;\n  }\n\n  // Animation event handlers\n  get oncancel() {\n    return this._animation.oncancel;\n  }\n  set oncancel(\n    cb: ((this: Animation, ev: AnimationPlaybackEvent) => any) | null,\n  ) {\n    this._animation.oncancel = cb;\n  }\n  get onfinish() {\n    return this._animation.onfinish;\n  }\n  set onfinish(\n    cb: ((this: Animation, ev: AnimationPlaybackEvent) => any) | null,\n  ) {\n    this._animation.onfinish = cb;\n  }\n  get onremove() {\n    return this._animation.onremove;\n  }\n  set onremove(cb: ((this: Animation, ev: Event) => any) | null) {\n    this._animation.onremove = cb;\n  }\n\n  // CustomAnimation overridden methods\n  play() {\n    this._animation.play();\n    cancelAnimationFrame(this._tickCbId!);\n    this._tickCbId = requestAnimationFrame(() => this._tick());\n  }\n\n  pause() {\n    this._animation.pause();\n    cancelAnimationFrame(this._tickCbId!);\n    this._tickCbId = null;\n  }\n\n  cancel() {\n    this.removeEventListener('finish', this._finishHandler);\n    this.removeEventListener('remove', this._finishHandler);\n    this._animation.cancel();\n    // signaling cancelation for customEffect to handle it as desired\n    this.customEffect(null);\n    cancelAnimationFrame(this._tickCbId!);\n    this._tickCbId = null;\n  }\n\n  commitStyles() {\n    console.warn(\n      'CustomEffect animations do not support commitStyles method as they have no style to commit',\n    );\n  }\n\n  // Animation methods without override\n  finish() {\n    this._animation.finish();\n  }\n  persist() {\n    this._animation.persist();\n  }\n  reverse() {\n    this._animation.reverse();\n  }\n  updatePlaybackRate(playbackRate: number) {\n    this._animation.updatePlaybackRate(playbackRate);\n  }\n\n  // Animation events API\n  addEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) {\n    this._animation.addEventListener(type, listener, options);\n  }\n  removeEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) {\n    this._animation.removeEventListener(type, listener, options);\n  }\n  dispatchEvent(event: Event) {\n    return this._animation.dispatchEvent(event);\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/api/webAnimations.js

@@ -1,3 +1,4 @@
+import { CustomAnimation } from '../CustomAnimation';
 import { AnimationGroup } from '../AnimationGroup';
 import { getElement, measure, mutate, getRanges, getNamedEffect, getEffectsData } from './common';
 import fastdom from 'fastdom';
@@ -83,7 +84,10 @@ function getWebAnimation(target, animationOptions, trigger, options, ownerDocume
       }
       keyframeEffect.setKeyframes(effect.keyframes);
     });
-    const animation = isViewProgress && timeline ? new Animation(keyframeEffect, timeline) : new Animation(keyframeEffect);
+    const timingOptions = isViewProgress && timeline ? {
+      timeline: timeline
+    } : {};
+    const animation = typeof effect.customEffect === 'function' ? new CustomAnimation(effect.customEffect, effectTarget || null, effectOptions, timingOptions) : new Animation(keyframeEffect, timingOptions.timeline);
 
     // if this is a ScrubAnimation with view-progress trigger and the browser supports the ViewTimeline API
     if (isViewProgress) {

package/dist/esm/api/webAnimations.js.map

@@ -1 +1 @@
-{"version":3,"names":["AnimationGroup","getElement","measure","mutate","getRanges","getNamedEffect","getEffectsData","fastdom","getWebAnimationEffect","preset","animation","target","options","type","duration","reducedMotion","iterations","undefined","domApi","HTMLElement","web","getWebAnimation","animationOptions","trigger","ownerDocument","element","effectOptions","customEffect","namedEffect","id","mouseAnimationPreset","mouseAnimationFactory","animationsData","data","effectId","timeline","isViewProgress","window","ViewTimeline","subject","componentId","animations","map","_ref","effect","part","effectTarget","querySelector","keyframeEffect","KeyframeEffect","updateTiming","timing","setKeyframes","keyframes","Animation","start","end","rangeStart","rangeEnd","play","startOffset","endOffset","_offset","_offset2","startOffsetToWrite","endOffsetToWrite","Object","assign","name","offset","value","add","startOffsetAdd","endOffsetAdd","measured","Promise","resolve"],"sources":["../../../src/api/webAnimations.ts"],"sourcesContent":["import type {\n  AnimationData,\n  AnimationDataForScrub,\n  AnimationEffectAPI,\n  AnimationOptions,\n  MouseAnimationFactory,\n  MouseAnimationInstance,\n  ScrubAnimationOptions,\n  TriggerVariant,\n  WebAnimationEffectFactory,\n} from '../types';\nimport { AnimationGroup } from '../AnimationGroup';\nimport {\n  getElement,\n  measure,\n  mutate,\n  getRanges,\n  getNamedEffect,\n  getEffectsData,\n} from './common';\nimport fastdom from 'fastdom';\n\nfunction getWebAnimationEffect(\n  preset: AnimationEffectAPI<any> | WebAnimationEffectFactory<any> | null,\n  animation: AnimationOptions,\n  target: HTMLElement | string | null,\n  options?: Record<string, any>,\n): AnimationData[] | MouseAnimationFactory {\n  if (preset) {\n    // validate duration is a number over 0\n    if (animation.type === 'TimeAnimationOptions') {\n      animation.duration = animation.duration || 1;\n\n      if (options?.reducedMotion) {\n        if (animation.iterations === 1 || animation.iterations == undefined) {\n          animation = { ...animation, duration: 1 };\n        } else {\n          return [];\n        }\n      }\n    }\n\n    let domApi;\n    if (target instanceof HTMLElement) {\n      domApi = { measure: measure(target), mutate: mutate(target) };\n    }\n\n    return (preset as AnimationEffectAPI<any>).web\n      ? (preset as AnimationEffectAPI<any>).web(animation, domApi, options)\n      : (preset as WebAnimationEffectFactory<any>)(animation, domApi, options);\n  }\n\n  return [];\n}\n\nfunction getWebAnimation(\n  target: HTMLElement | string | null,\n  animationOptions: AnimationOptions,\n  trigger?: Partial<TriggerVariant> & { element?: HTMLElement },\n  options?: Record<string, any>,\n  ownerDocument?: Document,\n): AnimationGroup | MouseAnimationInstance {\n  const element =\n    target instanceof HTMLElement ? target : getElement(target, ownerDocument);\n\n  if (trigger?.trigger === 'pointer-move') {\n    let effectOptions = animationOptions;\n\n    if (animationOptions.customEffect) {\n      effectOptions = {\n        ...animationOptions,\n        namedEffect: { id: '', type: 'CustomMouse' },\n      };\n    }\n\n    // TODO: need to fix the type here, currently lying about the returned type to be WebAnimationEffectFactory instead of MouseAnimationFactoryCreate\n    const mouseAnimationPreset = getNamedEffect(\n      effectOptions,\n    ) as WebAnimationEffectFactory<'scrub'>;\n    const mouseAnimationFactory = getWebAnimationEffect(\n      mouseAnimationPreset,\n      animationOptions,\n      element,\n      options,\n    ) as MouseAnimationFactory;\n\n    return mouseAnimationFactory(element as HTMLElement);\n  }\n\n  // get the preset for the given animation options\n  const namedEffect = getNamedEffect(\n    animationOptions,\n  ) as AnimationEffectAPI<any> | null;\n\n  const animationsData = getWebAnimationEffect(\n    namedEffect,\n    animationOptions,\n    element,\n    options,\n  ) as AnimationData[];\n  const data = getEffectsData(animationsData, animationOptions.effectId);\n\n  let timeline: typeof window.ViewTimeline | undefined;\n  const isViewProgress = trigger?.trigger === 'view-progress';\n\n  // if this is a ScrubAnimation with view-progress trigger and the browser supports the ViewTimeline API\n  if (isViewProgress && window.ViewTimeline) {\n    // generate the timeline object\n    // @ts-expect-error\n    timeline = new ViewTimeline({\n      subject: trigger.element || getElement(trigger.componentId!),\n    });\n  }\n\n  // generate an Animation object for each data object\n  const animations = data.map(\n    ({ effect, options: effectOptions, id, part }) => {\n      const effectTarget = part\n        ? element?.querySelector(`[data-motion-part~=\"${part}\"]`) // maybe add ~ here as well\n        : element;\n\n      const keyframeEffect = new KeyframeEffect(\n        effectTarget || null,\n        [],\n        effectOptions,\n      );\n\n      // set the keyframes for the KeyframeEffect after measurements and mutations\n      fastdom.mutate(() => {\n        if ('timing' in effect) {\n          keyframeEffect.updateTiming(effect.timing as OptionalEffectTiming);\n        }\n\n        keyframeEffect.setKeyframes(effect.keyframes);\n      });\n\n      const animation: Animation =\n        isViewProgress && timeline\n          ? new Animation(keyframeEffect, timeline as AnimationTimeline)\n          : new Animation(keyframeEffect);\n\n      // if this is a ScrubAnimation with view-progress trigger and the browser supports the ViewTimeline API\n      if (isViewProgress) {\n        if (timeline) {\n          // set the ranges for the animation after measurements and mutations\n          fastdom.mutate(() => {\n            const { start, end } = getRanges(effect as AnimationDataForScrub);\n            // @ts-expect-error\n            animation.rangeStart = start;\n            // @ts-expect-error\n            animation.rangeEnd = end;\n\n            animation.play();\n          });\n        } else {\n          const { startOffset, endOffset } =\n            animationOptions as ScrubAnimationOptions;\n\n          // set the ranges for the animation after measurements and mutations\n          fastdom.mutate(() => {\n            const startOffsetToWrite =\n              (effect as AnimationDataForScrub).startOffset || startOffset;\n            const endOffsetToWrite =\n              (effect as AnimationDataForScrub).endOffset || endOffset;\n\n            Object.assign(animation, {\n              start: {\n                name: startOffsetToWrite!.name,\n                offset: startOffsetToWrite!.offset?.value,\n                add: (effect as AnimationDataForScrub)!.startOffsetAdd,\n              },\n              end: {\n                name: endOffsetToWrite!.name,\n                offset: endOffsetToWrite!.offset?.value,\n                add: (effect as AnimationDataForScrub)!.endOffsetAdd,\n              },\n            });\n          });\n        }\n      }\n\n      if (id) {\n        animation.id = id;\n      }\n\n      return animation;\n    },\n  );\n\n  // create an AnimationGroup with the generate animations\n  return new AnimationGroup(animations, {\n    ...animationOptions,\n    trigger: { ...(trigger || ({} as Partial<TriggerVariant>)) },\n    // make sure the group is ready after all animation targets are measured and mutated\n    measured: new Promise((resolve) => fastdom.mutate(resolve)),\n  });\n}\n\nexport { getWebAnimation };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["CustomAnimation","AnimationGroup","getElement","measure","mutate","getRanges","getNamedEffect","getEffectsData","fastdom","getWebAnimationEffect","preset","animation","target","options","type","duration","reducedMotion","iterations","undefined","domApi","HTMLElement","web","getWebAnimation","animationOptions","trigger","ownerDocument","element","effectOptions","customEffect","namedEffect","id","mouseAnimationPreset","mouseAnimationFactory","animationsData","data","effectId","timeline","isViewProgress","window","ViewTimeline","subject","componentId","animations","map","_ref","effect","part","effectTarget","querySelector","keyframeEffect","KeyframeEffect","updateTiming","timing","setKeyframes","keyframes","timingOptions","Animation","start","end","rangeStart","rangeEnd","play","startOffset","endOffset","_offset","_offset2","startOffsetToWrite","endOffsetToWrite","Object","assign","name","offset","value","add","startOffsetAdd","endOffsetAdd","measured","Promise","resolve"],"sources":["../../../src/api/webAnimations.ts"],"sourcesContent":["import type {\n  AnimationData,\n  AnimationDataForScrub,\n  AnimationEffectAPI,\n  AnimationOptions,\n  MouseAnimationFactory,\n  MouseAnimationInstance,\n  ScrubAnimationOptions,\n  TriggerVariant,\n  WebAnimationEffectFactory,\n} from '../types';\nimport { CustomAnimation } from '../CustomAnimation';\nimport { AnimationGroup } from '../AnimationGroup';\nimport {\n  getElement,\n  measure,\n  mutate,\n  getRanges,\n  getNamedEffect,\n  getEffectsData,\n} from './common';\nimport fastdom from 'fastdom';\n\nfunction getWebAnimationEffect(\n  preset: AnimationEffectAPI<any> | WebAnimationEffectFactory<any> | null,\n  animation: AnimationOptions,\n  target: HTMLElement | string | null,\n  options?: Record<string, any>,\n): AnimationData[] | MouseAnimationFactory {\n  if (preset) {\n    // validate duration is a number over 0\n    if (animation.type === 'TimeAnimationOptions') {\n      animation.duration = animation.duration || 1;\n\n      if (options?.reducedMotion) {\n        if (animation.iterations === 1 || animation.iterations == undefined) {\n          animation = { ...animation, duration: 1 };\n        } else {\n          return [];\n        }\n      }\n    }\n\n    let domApi;\n    if (target instanceof HTMLElement) {\n      domApi = { measure: measure(target), mutate: mutate(target) };\n    }\n\n    return (preset as AnimationEffectAPI<any>).web\n      ? (preset as AnimationEffectAPI<any>).web(animation, domApi, options)\n      : (preset as WebAnimationEffectFactory<any>)(animation, domApi, options);\n  }\n\n  return [];\n}\n\nfunction getWebAnimation(\n  target: HTMLElement | string | null,\n  animationOptions: AnimationOptions,\n  trigger?: Partial<TriggerVariant> & { element?: HTMLElement },\n  options?: Record<string, any>,\n  ownerDocument?: Document,\n): AnimationGroup | MouseAnimationInstance {\n  const element =\n    target instanceof HTMLElement ? target : getElement(target, ownerDocument);\n\n  if (trigger?.trigger === 'pointer-move') {\n    let effectOptions = animationOptions;\n\n    if (animationOptions.customEffect) {\n      effectOptions = {\n        ...animationOptions,\n        namedEffect: { id: '', type: 'CustomMouse' },\n      };\n    }\n\n    // TODO: need to fix the type here, currently lying about the returned type to be WebAnimationEffectFactory instead of MouseAnimationFactoryCreate\n    const mouseAnimationPreset = getNamedEffect(\n      effectOptions,\n    ) as WebAnimationEffectFactory<'scrub'>;\n    const mouseAnimationFactory = getWebAnimationEffect(\n      mouseAnimationPreset,\n      animationOptions,\n      element,\n      options,\n    ) as MouseAnimationFactory;\n\n    return mouseAnimationFactory(element as HTMLElement);\n  }\n\n  // get the preset for the given animation options\n  const namedEffect = getNamedEffect(\n    animationOptions,\n  ) as AnimationEffectAPI<any> | null;\n\n  const animationsData = getWebAnimationEffect(\n    namedEffect,\n    animationOptions,\n    element,\n    options,\n  ) as AnimationData[];\n  const data = getEffectsData(animationsData, animationOptions.effectId);\n\n  let timeline: typeof window.ViewTimeline | undefined;\n  const isViewProgress = trigger?.trigger === 'view-progress';\n\n  // if this is a ScrubAnimation with view-progress trigger and the browser supports the ViewTimeline API\n  if (isViewProgress && window.ViewTimeline) {\n    // generate the timeline object\n    // @ts-expect-error\n    timeline = new ViewTimeline({\n      subject: trigger.element || getElement(trigger.componentId!),\n    });\n  }\n\n  // generate an Animation object for each data object\n  const animations = data.map(\n    ({ effect, options: effectOptions, id, part }) => {\n      const effectTarget = part\n        ? element?.querySelector(`[data-motion-part~=\"${part}\"]`) // maybe add ~ here as well\n        : element;\n\n      const keyframeEffect = new KeyframeEffect(\n        effectTarget || null,\n        [],\n        effectOptions,\n      );\n\n      // set the keyframes for the KeyframeEffect after measurements and mutations\n      fastdom.mutate(() => {\n        if ('timing' in effect) {\n          keyframeEffect.updateTiming(effect.timing as OptionalEffectTiming);\n        }\n\n        keyframeEffect.setKeyframes(effect.keyframes);\n      });\n\n      const timingOptions =\n        isViewProgress && timeline\n          ? { timeline: timeline as AnimationTimeline }\n          : {};\n      const animation =\n        typeof effect.customEffect === 'function'\n          ? (new CustomAnimation(\n              effect.customEffect,\n              effectTarget || null,\n              effectOptions,\n              timingOptions,\n            ) as Animation)\n          : new Animation(keyframeEffect, timingOptions.timeline);\n\n      // if this is a ScrubAnimation with view-progress trigger and the browser supports the ViewTimeline API\n      if (isViewProgress) {\n        if (timeline) {\n          // set the ranges for the animation after measurements and mutations\n          fastdom.mutate(() => {\n            const { start, end } = getRanges(effect as AnimationDataForScrub);\n            // @ts-expect-error\n            animation.rangeStart = start;\n            // @ts-expect-error\n            animation.rangeEnd = end;\n\n            animation.play();\n          });\n        } else {\n          const { startOffset, endOffset } =\n            animationOptions as ScrubAnimationOptions;\n\n          // set the ranges for the animation after measurements and mutations\n          fastdom.mutate(() => {\n            const startOffsetToWrite =\n              (effect as AnimationDataForScrub).startOffset || startOffset;\n            const endOffsetToWrite =\n              (effect as AnimationDataForScrub).endOffset || endOffset;\n\n            Object.assign(animation, {\n              start: {\n                name: startOffsetToWrite!.name,\n                offset: startOffsetToWrite!.offset?.value,\n                add: (effect as AnimationDataForScrub)!.startOffsetAdd,\n              },\n              end: {\n                name: endOffsetToWrite!.name,\n                offset: endOffsetToWrite!.offset?.value,\n                add: (effect as AnimationDataForScrub)!.endOffsetAdd,\n              },\n            });\n          });\n        }\n      }\n\n      if (id) {\n        animation.id = id;\n      }\n\n      return animation;\n    },\n  );\n\n  // create an AnimationGroup with the generate animations\n  return new AnimationGroup(animations, {\n    ...animationOptions,\n    trigger: { ...(trigger || ({} as Partial<TriggerVariant>)) },\n    // make sure the group is ready after all animation targets are measured and mutated\n    measured: new Promise((resolve) => fastdom.mutate(resolve)),\n  });\n}\n\nexport { getWebAnimation };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/library/mouse/CustomMouse.js

@@ -30,6 +30,9 @@ export class CustomMouse {
       v,
       active
     };
+    if (typeof this.options.customEffect === 'function') {
+      this.options.customEffect(this.target, this.currentProgress);
+    }
   }
   cancel() {
     this.currentProgress = {

package/dist/esm/library/mouse/CustomMouse.js.map

@@ -1 +1 @@
-{"version":3,"names":["CustomMouse","constructor","target","options","_defineProperty","currentProgress","x","y","v","active","play","progress","_ref","cancel","getProgress","transition","style","create"],"sources":["../../../../src/library/mouse/CustomMouse.ts"],"sourcesContent":["import type {\n  AnimationExtraOptions,\n  Progress,\n  ScrubAnimationOptions,\n} from '../../types';\n\nexport class CustomMouse {\n  target: HTMLElement;\n  options: Record<string, any>;\n  currentProgress: Progress;\n\n  constructor(target: HTMLElement, options?: Record<string, any>) {\n    this.target = target;\n    this.options = options || {};\n    this.currentProgress = { x: 0.5, y: 0.5, v: { x: 0, y: 0 }, active: true };\n\n    this.play();\n  }\n\n  progress({ x, y, v, active }: Progress) {\n    this.currentProgress = { x, y, v, active };\n  }\n\n  cancel() {\n    this.currentProgress = { x: 0.5, y: 0.5, v: { x: 0, y: 0 } };\n  }\n\n  getProgress() {\n    return this.currentProgress;\n  }\n\n  play() {\n    if (this.options.transition && this.target) {\n      this.target.style.transition = this.options.transition;\n    }\n  }\n}\n\nexport function create(options: ScrubAnimationOptions & AnimationExtraOptions) {\n  return (target: HTMLElement) => new CustomMouse(target, options);\n}\n"],"mappings":";AAMA,OAAO,MAAMA,WAAW,CAAC;EAKvBC,WAAWA,CAACC,MAAmB,EAAEC,OAA6B,EAAE;IAAAC,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAC9D,IAAI,CAACF,MAAM,GAAGA,MAAM;IACpB,IAAI,CAACC,OAAO,GAAGA,OAAO,IAAI,CAAC,CAAC;IAC5B,IAAI,CAACE,eAAe,GAAG;MAAEC,CAAC,EAAE,GAAG;MAAEC,CAAC,EAAE,GAAG;MAAEC,CAAC,EAAE;QAAEF,CAAC,EAAE,CAAC;QAAEC,CAAC,EAAE;MAAE,CAAC;MAAEE,MAAM,EAAE;IAAK,CAAC;IAE1E,IAAI,CAACC,IAAI,CAAC,CAAC;EACb;EAEAC,QAAQA,CAAAC,IAAA,EAAgC;IAAA,IAA/B;MAAEN,CAAC;MAAEC,CAAC;MAAEC,CAAC;MAAEC;IAAiB,CAAC,GAAAG,IAAA;IACpC,IAAI,CAACP,eAAe,GAAG;MAAEC,CAAC;MAAEC,CAAC;MAAEC,CAAC;MAAEC;IAAO,CAAC;EAC5C;EAEAI,MAAMA,CAAA,EAAG;IACP,IAAI,CAACR,eAAe,GAAG;MAAEC,CAAC,EAAE,GAAG;MAAEC,CAAC,EAAE,GAAG;MAAEC,CAAC,EAAE;QAAEF,CAAC,EAAE,CAAC;QAAEC,CAAC,EAAE;MAAE;IAAE,CAAC;EAC9D;EAEAO,WAAWA,CAAA,EAAG;IACZ,OAAO,IAAI,CAACT,eAAe;EAC7B;EAEAK,IAAIA,CAAA,EAAG;IACL,IAAI,IAAI,CAACP,OAAO,CAACY,UAAU,IAAI,IAAI,CAACb,MAAM,EAAE;MAC1C,IAAI,CAACA,MAAM,CAACc,KAAK,CAACD,UAAU,GAAG,IAAI,CAACZ,OAAO,CAACY,UAAU;IACxD;EACF;AACF;AAEA,OAAO,SAASE,MAAMA,CAACd,OAAsD,EAAE;EAC7E,OAAQD,MAAmB,IAAK,IAAIF,WAAW,CAACE,MAAM,EAAEC,OAAO,CAAC;AAClE","ignoreList":[]}
+{"version":3,"names":["CustomMouse","constructor","target","options","_defineProperty","currentProgress","x","y","v","active","play","progress","_ref","customEffect","cancel","getProgress","transition","style","create"],"sources":["../../../../src/library/mouse/CustomMouse.ts"],"sourcesContent":["import type {\n  AnimationExtraOptions,\n  Progress,\n  ScrubAnimationOptions,\n} from '../../types';\n\nexport class CustomMouse {\n  target: HTMLElement;\n  options: Record<string, any>;\n  currentProgress: Progress;\n\n  constructor(target: HTMLElement, options?: Record<string, any>) {\n    this.target = target;\n    this.options = options || {};\n    this.currentProgress = { x: 0.5, y: 0.5, v: { x: 0, y: 0 }, active: true };\n\n    this.play();\n  }\n\n  progress({ x, y, v, active }: Progress) {\n    this.currentProgress = { x, y, v, active };\n    if (typeof this.options.customEffect === 'function') {\n      this.options.customEffect(this.target, this.currentProgress);\n    }\n  }\n\n  cancel() {\n    this.currentProgress = { x: 0.5, y: 0.5, v: { x: 0, y: 0 } };\n  }\n\n  getProgress() {\n    return this.currentProgress;\n  }\n\n  play() {\n    if (this.options.transition && this.target) {\n      this.target.style.transition = this.options.transition;\n    }\n  }\n}\n\nexport function create(options: ScrubAnimationOptions & AnimationExtraOptions) {\n  return (target: HTMLElement) => new CustomMouse(target, options);\n}\n"],"mappings":";AAMA,OAAO,MAAMA,WAAW,CAAC;EAKvBC,WAAWA,CAACC,MAAmB,EAAEC,OAA6B,EAAE;IAAAC,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAC9D,IAAI,CAACF,MAAM,GAAGA,MAAM;IACpB,IAAI,CAACC,OAAO,GAAGA,OAAO,IAAI,CAAC,CAAC;IAC5B,IAAI,CAACE,eAAe,GAAG;MAAEC,CAAC,EAAE,GAAG;MAAEC,CAAC,EAAE,GAAG;MAAEC,CAAC,EAAE;QAAEF,CAAC,EAAE,CAAC;QAAEC,CAAC,EAAE;MAAE,CAAC;MAAEE,MAAM,EAAE;IAAK,CAAC;IAE1E,IAAI,CAACC,IAAI,CAAC,CAAC;EACb;EAEAC,QAAQA,CAAAC,IAAA,EAAgC;IAAA,IAA/B;MAAEN,CAAC;MAAEC,CAAC;MAAEC,CAAC;MAAEC;IAAiB,CAAC,GAAAG,IAAA;IACpC,IAAI,CAACP,eAAe,GAAG;MAAEC,CAAC;MAAEC,CAAC;MAAEC,CAAC;MAAEC;IAAO,CAAC;IAC1C,IAAI,OAAO,IAAI,CAACN,OAAO,CAACU,YAAY,KAAK,UAAU,EAAE;MACnD,IAAI,CAACV,OAAO,CAACU,YAAY,CAAC,IAAI,CAACX,MAAM,EAAE,IAAI,CAACG,eAAe,CAAC;IAC9D;EACF;EAEAS,MAAMA,CAAA,EAAG;IACP,IAAI,CAACT,eAAe,GAAG;MAAEC,CAAC,EAAE,GAAG;MAAEC,CAAC,EAAE,GAAG;MAAEC,CAAC,EAAE;QAAEF,CAAC,EAAE,CAAC;QAAEC,CAAC,EAAE;MAAE;IAAE,CAAC;EAC9D;EAEAQ,WAAWA,CAAA,EAAG;IACZ,OAAO,IAAI,CAACV,eAAe;EAC7B;EAEAK,IAAIA,CAAA,EAAG;IACL,IAAI,IAAI,CAACP,OAAO,CAACa,UAAU,IAAI,IAAI,CAACd,MAAM,EAAE;MAC1C,IAAI,CAACA,MAAM,CAACe,KAAK,CAACD,UAAU,GAAG,IAAI,CAACb,OAAO,CAACa,UAAU;IACxD;EACF;AACF;AAEA,OAAO,SAASE,MAAMA,CAACf,OAAsD,EAAE;EAC7E,OAAQD,MAAmB,IAAK,IAAIF,WAAW,CAACE,MAAM,EAAEC,OAAO,CAAC;AAClE","ignoreList":[]}

package/dist/types/CustomAnimation.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @class CustomAnimation
+ *
+ * A wrapper object for Animation that mimics the same interface but implements CustomEffect that runs JS code instead of KeyframeEffect.
+ * The class is implemented by holding an inner Animation object instead of inheritance due to some browsers not allowing extension of built-in objects.
+ */
+export declare class CustomAnimation {
+    _animation: Animation;
+    customEffect: (progress: number | null) => void;
+    progress: number | null;
+    _tickCbId: number | null;
+    _finishHandler: (_: any) => void;
+    constructor(customEffect: (element: Element | null, progress: number | null) => void, target: Element | null, effectOptions: KeyframeEffectOptions, timingOptions: {
+        timeline?: AnimationTimeline | null;
+    });
+    private _tick;
+    get currentTime(): CSSNumberish | null;
+    set currentTime(time: CSSNumberish | null);
+    get startTime(): CSSNumberish | null;
+    set startTime(time: CSSNumberish | null);
+    get playbackRate(): number;
+    set playbackRate(speed: number);
+    get id(): string;
+    set id(uid: string);
+    get effect(): AnimationEffect | null;
+    set effect(e: AnimationEffect | null);
+    get timeline(): AnimationTimeline | null;
+    set timeline(tl: AnimationTimeline | null);
+    get finished(): Promise<Animation>;
+    get pending(): boolean;
+    get playState(): AnimationPlayState;
+    get ready(): Promise<Animation>;
+    get replaceState(): AnimationReplaceState;
+    get oncancel(): ((this: Animation, ev: AnimationPlaybackEvent) => any) | null;
+    set oncancel(cb: ((this: Animation, ev: AnimationPlaybackEvent) => any) | null);
+    get onfinish(): ((this: Animation, ev: AnimationPlaybackEvent) => any) | null;
+    set onfinish(cb: ((this: Animation, ev: AnimationPlaybackEvent) => any) | null);
+    get onremove(): ((this: Animation, ev: Event) => any) | null;
+    set onremove(cb: ((this: Animation, ev: Event) => any) | null);
+    play(): void;
+    pause(): void;
+    cancel(): void;
+    commitStyles(): void;
+    finish(): void;
+    persist(): void;
+    reverse(): void;
+    updatePlaybackRate(playbackRate: number): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    dispatchEvent(event: Event): boolean;
+}
+//# sourceMappingURL=CustomAnimation.d.ts.map

package/dist/types/CustomAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomAnimation.d.ts","sourceRoot":"","sources":["../../src/CustomAnimation.ts"],"names":[],"mappings":"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"}

package/dist/types/api/webAnimations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"webAnimations.d.ts","sourceRoot":"","sources":["../../../src/api/webAnimations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAIV,gBAAgB,EAEhB,sBAAsB,EAEtB,cAAc,EAEf,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AA4CnD,iBAAS,eAAe,CACtB,MAAM,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,EACnC,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,WAAW,CAAA;CAAE,EAC7D,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC7B,aAAa,CAAC,EAAE,QAAQ,GACvB,cAAc,GAAG,sBAAsB,CAuIzC;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"webAnimations.d.ts","sourceRoot":"","sources":["../../../src/api/webAnimations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAIV,gBAAgB,EAEhB,sBAAsB,EAEtB,cAAc,EAEf,MAAM,UAAU,CAAC;AAElB,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AA4CnD,iBAAS,eAAe,CACtB,MAAM,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,EACnC,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,WAAW,CAAA;CAAE,EAC7D,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC7B,aAAa,CAAC,EAAE,QAAQ,GACvB,cAAc,GAAG,sBAAsB,CAgJzC;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/types/library/mouse/CustomMouse.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomMouse.d.ts","sourceRoot":"","sources":["../../../../src/library/mouse/CustomMouse.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,QAAQ,EACR,qBAAqB,EACtB,MAAM,aAAa,CAAC;AAErB,qBAAa,WAAW;IACtB,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,eAAe,EAAE,QAAQ,CAAC;gBAEd,MAAM,EAAE,WAAW,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAQ9D,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,QAAQ;IAItC,MAAM;IAIN,WAAW;IAIX,IAAI;CAKL;AAED,wBAAgB,MAAM,CAAC,OAAO,EAAE,qBAAqB,GAAG,qBAAqB,YAC3D,WAAW,iBAC5B"}
+{"version":3,"file":"CustomMouse.d.ts","sourceRoot":"","sources":["../../../../src/library/mouse/CustomMouse.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,QAAQ,EACR,qBAAqB,EACtB,MAAM,aAAa,CAAC;AAErB,qBAAa,WAAW;IACtB,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,eAAe,EAAE,QAAQ,CAAC;gBAEd,MAAM,EAAE,WAAW,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAQ9D,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,QAAQ;IAOtC,MAAM;IAIN,WAAW;IAIX,IAAI;CAKL;AAED,wBAAgB,MAAM,CAAC,OAAO,EAAE,qBAAqB,GAAG,qBAAqB,YAC3D,WAAW,iBAC5B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/motion",
-  "version": "1.627.0",
+  "version": "1.628.0",
   "license": "UNLICENSED",
   "author": {
     "name": "wow!Team",
@@ -83,5 +83,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "fa6f13bd2f7128c6066f74cefa9d082af4a316a918227d60978bf007"
+  "falconPackageHash": "8650937207b6a6b03bb80f0a6e561791d9b6c491ecfbad6c6fbefe57"
 }