@pixodesk/svg-animator-web 1.0.24 → 1.0.27

package/dist/index.prerendered-waapi.umd.js

@@ -43,41 +43,6 @@ var PixodeskAnimator = (() => {
     setupAnimationTriggers: () => setupAnimationTriggers
   });
 
-  // ../svg-animator-core/src/PxAnimatorConstants.ts
-  var PxAnimatorMode = {
-    auto: "auto",
-    waapi: "waapi",
-    frames: "frames"
-  };
-  var PxAnimatorEngine = {
-    waapi: PxAnimatorMode.waapi,
-    frames: PxAnimatorMode.frames
-  };
-  var PxLoopExtend = {
-    /** Segment from the START; the animation is extended BEFORE the first keyframe
-     *  (intro loops that run before the main timeline begins). */
-    before: "before",
-    /** DEFAULT — segment from the END; extended AFTER the last keyframe (idle/outro
-     *  loops that continue once the main timeline has finished). */
-    after: "after"
-  };
-  function getAnimatorConfig(doc) {
-    var _a;
-    return (doc == null ? void 0 : doc.animator) || ((_a = doc == null ? void 0 : doc.meta) == null ? void 0 : _a.animator);
-  }
-  function getDefs(doc) {
-    var _a;
-    if (!doc) return void 0;
-    return (_a = getAnimatorConfig(doc)) == null ? void 0 : _a.definitions;
-  }
-  function getBindings(doc) {
-    var _a;
-    if (!doc) return void 0;
-    const animateById = (_a = getAnimatorConfig(doc)) == null ? void 0 : _a.animateById;
-    if (!animateById) return void 0;
-    return Object.entries(animateById).map(([id, anim]) => ({ id, animate: anim }));
-  }
-
   // ../svg-animator-core/src/PxAnimatorUtil.ts
   function bezierToSvgPath(path, forceCurves = false) {
     var _a, _b, _c, _d;
@@ -305,6 +270,7 @@ var PixodeskAnimator = (() => {
   }
   var COLOUR_ATTR_NAMES = /* @__PURE__ */ new Set(["color", "fill", "flood-color", "lighting-color", "stop-color", "stroke"]);
   var TRANSFORM_FN_NAMES = /* @__PURE__ */ new Set(["translate", "rotate", "scale", "skew"]);
+  var PCT_BASED_ATTR_NAMES = /* @__PURE__ */ new Set(["offset-distance", "offsetDistance"]);
   function composeTransformParts(parts, opts) {
     var _a;
     if (!parts) return "";
@@ -468,6 +434,41 @@ var PixodeskAnimator = (() => {
     return cubicBezier(flipped);
   }
 
+  // ../svg-animator-core/src/PxAnimatorConstants.ts
+  var PxAnimatorMode = {
+    auto: "auto",
+    waapi: "waapi",
+    frames: "frames"
+  };
+  var PxAnimatorEngine = {
+    waapi: PxAnimatorMode.waapi,
+    frames: PxAnimatorMode.frames
+  };
+  var PxLoopExtend = {
+    /** Segment from the START; the animation is extended BEFORE the first keyframe
+     *  (intro loops that run before the main timeline begins). */
+    before: "before",
+    /** DEFAULT — segment from the END; extended AFTER the last keyframe (idle/outro
+     *  loops that continue once the main timeline has finished). */
+    after: "after"
+  };
+  function getAnimatorConfig(doc) {
+    var _a;
+    return (doc == null ? void 0 : doc.animator) || ((_a = doc == null ? void 0 : doc.meta) == null ? void 0 : _a.animator);
+  }
+  function getDefs(doc) {
+    var _a;
+    if (!doc) return void 0;
+    return (_a = getAnimatorConfig(doc)) == null ? void 0 : _a.definitions;
+  }
+  function getBindings(doc) {
+    var _a;
+    if (!doc) return void 0;
+    const animateById = (_a = getAnimatorConfig(doc)) == null ? void 0 : _a.animateById;
+    if (!animateById) return void 0;
+    return Object.entries(animateById).map(([id, anim]) => ({ id, animate: anim }));
+  }
+
   // ../svg-animator-core/src/PxMotionPath.ts
   function getKfTranslate(kf) {
     var _a;
@@ -801,7 +802,7 @@ var PixodeskAnimator = (() => {
   }
 
   // ../svg-animator-core/src/PxDefinitions.ts
-  var LOOP_JUMP_SHIFT_MS = 10;
+  var LOOP_JUMP_SHIFT_MS = 1;
   function deepEqualValue(a, b) {
     if (a === b) return true;
     if (typeof a !== typeof b || a === null || b === null || typeof a !== "object") return false;
@@ -1050,6 +1051,8 @@ var PixodeskAnimator = (() => {
     const looped = [];
     const separateBoundary = loop.extend !== PxLoopExtend.before;
     const originalTerminalKf = keyframes[keyframes.length - 1];
+    let terminalEasingOverride;
+    let hasTerminalEasingOverride = false;
     function appendRep(repStart, isReversed, partial) {
       var _a2;
       let entries;
@@ -1090,7 +1093,16 @@ var PixodeskAnimator = (() => {
         const prevKf = looped.length > 0 ? looped[looped.length - 1] : originalTerminalKf;
         const isBoundary = separateBoundary && i === 0 && prevKf !== void 0 && Math.abs(((_a2 = prevKf.t) != null ? _a2 : 0) - (repStart + entry.relT * segDuration)) < 1e-9;
         if (isBoundary) {
-          if (deepEqualValue(prevKf.v, entry.v)) continue;
+          if (deepEqualValue(prevKf.v, entry.v)) {
+            if (looped.length > 0) {
+              prevKf.e = entry.e;
+              prevKf.tangentOut = entry.tangentOut;
+            } else {
+              terminalEasingOverride = entry.e;
+              hasTerminalEasingOverride = true;
+            }
+            continue;
+          }
           if (looped.length > 0) {
             delete prevKf.tangentIn;
             delete prevKf.tangentOut;
@@ -1171,6 +1183,11 @@ var PixodeskAnimator = (() => {
     if (loop.extend === PxLoopExtend.before) {
       return [...looped, ...keyframes];
     } else {
+      if (hasTerminalEasingOverride && keyframes.length > 0) {
+        const head = keyframes.slice(0, -1);
+        const tail = __spreadProps(__spreadValues({}, keyframes[keyframes.length - 1]), { e: terminalEasingOverride });
+        return [...head, tail, ...looped];
+      }
       return [...keyframes, ...looped];
     }
   }
@@ -1227,6 +1244,9 @@ var PixodeskAnimator = (() => {
   function normalizeAnimationDefinition(animDef, duration, defs, engine = PxAnimatorEngine.waapi) {
     const normalized = {};
     for (const [propName, propAnim] of Object.entries(animDef)) {
+      if (propName === "transform" && propAnim.alongPathMode === "offsetPath" && animDef["offsetDistance"] !== void 0) {
+        continue;
+      }
       const normalizedKfs = normalizeKeyframes(propName, propAnim, duration, defs);
       if (normalizedKfs.length > 0) {
         const out = { kfs: normalizedKfs };
@@ -1420,6 +1440,8 @@ var PixodeskAnimator = (() => {
     } else if (propName === "d") {
       const paths = value && typeof value === "object" && Array.isArray(value.paths) ? value.paths : [];
       cssValue = 'path("' + paths.map((bz) => bezierToSvgPath(bz, true)).join("") + '")';
+    } else if (PCT_BASED_ATTR_NAMES.has(propName) && typeof value === "number") {
+      cssValue = value * 100 + "%";
     } else {
       cssValue = "" + value;
     }
@@ -1488,7 +1510,7 @@ var PixodeskAnimator = (() => {
     }
     return result;
   }
-  function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsupportedAttrs) {
+  function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsupportedAttrs, scrollTimeline) {
     var _a;
     const config = getAnimatorConfig(doc) || {};
     if (!rootElement) {
@@ -1547,7 +1569,12 @@ var PixodeskAnimator = (() => {
           if (keyframes.length > 0) {
             try {
               const effect = new KeyframeEffect(element, keyframes, effectOptions);
-              const anim = new Animation(effect, document.timeline);
+              const anim = new Animation(effect, scrollTimeline ? scrollTimeline.timeline : document.timeline);
+              if (scrollTimeline) {
+                const a = anim;
+                if (scrollTimeline.rangeStart) a.rangeStart = scrollTimeline.rangeStart;
+                if (scrollTimeline.rangeEnd) a.rangeEnd = scrollTimeline.rangeEnd;
+              }
               if (callbacks == null ? void 0 : callbacks.onFinish) anim.onfinish = () => {
                 var _a2;
                 if (finishNotified) return;
@@ -1641,7 +1668,14 @@ var PixodeskAnimator = (() => {
       }
     };
     if (config.trigger) {
-      setupAnimationTriggers(api, config.trigger);
+      if (config.timelineSource === "scroll") {
+        console.warn("scroll timeline: `animator.trigger` is ignored (triggers do not apply to scroll-driven playback)");
+      } else {
+        setupAnimationTriggers(api, config.trigger);
+      }
+    }
+    if (scrollTimeline) {
+      animations.forEach((a) => a.play());
     }
     return api;
   }