@pixodesk/svg-animator-react 1.0.8 → 1.0.10

package/dist/index.umd.js

@@ -1759,7 +1759,8 @@ var PixodeskAnimatorReact = (() => {
   // src/index.ts
   var index_exports = {};
   __export(index_exports, {
-    PixodeskSvgAnimator: () => PixodeskSvgAnimator_default
+    PixodeskSvgAnimator: () => PixodeskSvgAnimator_default,
+    PixodeskSvgCssAnimator: () => PixodeskSvgCssAnimator_default
   });
 
   // ../svg-animator-web/dist/index.js
@@ -1794,6 +1795,42 @@ var PixodeskAnimatorReact = (() => {
       }
     return target;
   };
+  var PX_ANIM_SRC_ATTR_NAME = "data-px-animation-src";
+  var PX_ANIM_ATTR_NAME = "_px_animator";
+  var ANIMATE_ATTR = "animate";
+  var TEXT_ATTR = "text";
+  var TEXT_CONTENT_ATTR = "textContent";
+  var INTERNAL_ATTRS = /* @__PURE__ */ new Set([
+    "type",
+    "children",
+    ANIMATE_ATTR,
+    "animator",
+    "meta",
+    "defs",
+    "bindings",
+    TEXT_ATTR,
+    TEXT_CONTENT_ATTR
+  ]);
+  function isPxElementFileFormat(fileJson) {
+    if (!(fileJson && typeof fileJson === "object" && !Array.isArray(fileJson))) {
+      return false;
+    }
+    return fileJson["type"] === "svg" || fileJson["tagName"] === "svg";
+  }
+  function getAnimatorConfig(doc) {
+    var _a, _b;
+    return (doc == null ? void 0 : doc.animator) || ((_a = doc == null ? void 0 : doc.meta) == null ? void 0 : _a.animator) || (doc == null ? void 0 : doc.animation) || ((_b = doc == null ? void 0 : doc.meta) == null ? void 0 : _b.animation);
+  }
+  function getDefs(doc) {
+    var _a;
+    if (!doc) return void 0;
+    return doc.defs || ((_a = doc.meta) == null ? void 0 : _a.defs);
+  }
+  function getBindings(doc) {
+    var _a;
+    if (!doc) return void 0;
+    return doc.bindings || ((_a = doc.meta) == null ? void 0 : _a.bindings);
+  }
   function bezierToSvgPath(path) {
     var _a, _b, _c, _d;
     const v = path.v;
@@ -1882,50 +1919,104 @@ var PixodeskAnimatorReact = (() => {
     const t = (value - inMin) / (inMax - inMin);
     return outMin + t * (outMax - outMin);
   }
-  function cubicBezier(easing) {
-    const [p1x, p1y, p2x, p2y] = easing;
+  function solveCubicBezierX(p1x, p2x, x) {
+    if (x <= 0) return 0;
+    if (x >= 1) return 1;
     const cx = 3 * p1x;
     const bx = 3 * (p2x - p1x) - cx;
     const ax = 1 - cx - bx;
+    function sampleX(t) {
+      return ((ax * t + bx) * t + cx) * t;
+    }
+    function sampleDX(t) {
+      return (3 * ax * t + 2 * bx) * t + cx;
+    }
+    let t2 = x;
+    let t0 = 0;
+    let t1 = 1;
+    for (let i = 0; i < 8; i++) {
+      const x2 = sampleX(t2) - x;
+      if (Math.abs(x2) < 1e-6) return t2;
+      const d2 = sampleDX(t2);
+      if (Math.abs(d2) < 1e-6) break;
+      t2 -= x2 / d2;
+    }
+    t2 = x;
+    while (t0 < t1) {
+      const x2 = sampleX(t2);
+      if (Math.abs(x2 - x) < 1e-6) return t2;
+      if (x > x2) t0 = t2;
+      else t1 = t2;
+      t2 = (t1 + t0) / 2;
+    }
+    return t2;
+  }
+  function cubicBezier(easing) {
+    const [p1x, p1y, p2x, p2y] = easing;
     const cy = 3 * p1y;
     const by = 3 * (p2y - p1y) - cy;
     const ay = 1 - cy - by;
-    function sampleCurveX(t) {
-      return ((ax * t + bx) * t + cx) * t;
-    }
     function sampleCurveY(t) {
       return ((ay * t + by) * t + cy) * t;
     }
-    function sampleCurveDerivativeX(t) {
-      return (3 * ax * t + 2 * bx) * t + cx;
-    }
-    function solveCurveX(x) {
-      if (x <= 0) return 0;
-      if (x >= 1) return 1;
-      let t2 = x;
-      let t0 = 0;
-      let t1 = 1;
-      for (let i = 0; i < 8; i++) {
-        const x2 = sampleCurveX(t2) - x;
-        if (Math.abs(x2) < 1e-6) return t2;
-        const d2 = sampleCurveDerivativeX(t2);
-        if (Math.abs(d2) < 1e-6) break;
-        t2 -= x2 / d2;
-      }
-      t2 = x;
-      while (t0 < t1) {
-        const x2 = sampleCurveX(t2);
-        if (Math.abs(x2 - x) < 1e-6) return t2;
-        if (x > x2) t0 = t2;
-        else t1 = t2;
-        t2 = (t1 + t0) / 2;
-      }
-      return t2;
-    }
     return function(x) {
-      return sampleCurveY(solveCurveX(x));
+      return sampleCurveY(solveCubicBezierX(p1x, p2x, x));
     };
   }
+  function lerp2(a, b, t) {
+    return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
+  }
+  function subdivideCubicBezier(p0, p1, p2, p3, t) {
+    const q0 = lerp2(p0, p1, t);
+    const q1 = lerp2(p1, p2, t);
+    const q2 = lerp2(p2, p3, t);
+    const r0 = lerp2(q0, q1, t);
+    const r1 = lerp2(q1, q2, t);
+    const s = lerp2(r0, r1, t);
+    return {
+      left: [p0, q0, r0, s],
+      right: [s, r1, q2, p3]
+    };
+  }
+  function splitEasing(easing, xFraction) {
+    if (!easing) return { left: void 0, right: void 0 };
+    if (xFraction <= 0) return { left: void 0, right: easing };
+    if (xFraction >= 1) return { left: easing, right: void 0 };
+    const [x1, y1, x2, y2] = easing;
+    const t = solveCubicBezierX(x1, x2, xFraction);
+    const p0 = [0, 0];
+    const p1 = [x1, y1];
+    const p2 = [x2, y2];
+    const p3 = [1, 1];
+    const { left, right } = subdivideCubicBezier(p0, p1, p2, p3, t);
+    const sx = left[3][0];
+    const sy = left[3][1];
+    let leftEasing;
+    if (sx > 1e-9 && Math.abs(sy) > 1e-9) {
+      leftEasing = [
+        left[1][0] / sx,
+        left[1][1] / sy,
+        left[2][0] / sx,
+        left[2][1] / sy
+      ];
+    }
+    let rightEasing;
+    const rx = 1 - sx;
+    const ry = 1 - sy;
+    if (rx > 1e-9 && Math.abs(ry) > 1e-9) {
+      rightEasing = [
+        (right[1][0] - sx) / rx,
+        (right[1][1] - sy) / ry,
+        (right[2][0] - sx) / rx,
+        (right[2][1] - sy) / ry
+      ];
+    }
+    return { left: leftEasing, right: rightEasing };
+  }
+  function reverseEasing(easing) {
+    if (!easing) return void 0;
+    return [1 - easing[2], 1 - easing[3], 1 - easing[0], 1 - easing[1]];
+  }
   function toRGBA(color) {
     const r = Math.round(color[0] * 255);
     const g = Math.round(color[1] * 255);
@@ -2032,11 +2123,143 @@ var PixodeskAnimatorReact = (() => {
     return Math.max(min, Math.min(value, max));
   }
   var SVG_NS = "http://www.w3.org/2000/svg";
-  var INTERNAL_ATTRS = /* @__PURE__ */ new Set(["type", "children", "animate", "style", "animator", "defs", "bindings"]);
-  function createElement(tagName, props, style, children) {
+  var ALLOWED_SVG_TAGS_LOWER_CASE = new Set([
+    "svg",
+    "g",
+    "path",
+    "circle",
+    "ellipse",
+    "rect",
+    "line",
+    "polyline",
+    "polygon",
+    "text",
+    "tspan",
+    "defs",
+    "clipPath",
+    "mask",
+    "pattern",
+    "linearGradient",
+    "radialGradient",
+    "stop",
+    "use",
+    "symbol",
+    "marker",
+    "filter",
+    "feGaussianBlur",
+    "feOffset",
+    "feBlend",
+    "feColorMatrix",
+    "feMerge",
+    "feMergeNode"
+  ].map((tagName) => tagName.toLowerCase()));
+  var ALLOWED_RESOURCE_ATTRIBUTES = [
+    "href",
+    // <use>
+    "src",
+    // <image>
+    "filter",
+    // url(#filterId)
+    "clipPath",
+    // clip-path="url(#clipPathId)"
+    "mask",
+    // url(#maskId)
+    "markerStart",
+    // marker-start="url(#markerId)"
+    "markerMid",
+    // marker-mid="url(#markerId)"
+    "markerEnd"
+    // marker-end="url(#markerId)"
+    // 'fill',           // url(#gradientId) or url(#patternId)
+    // 'stroke',         // url(#gradientId) or url(#patternId)
+    // Don't allow 'cursor', can use external SVG,         // url(cursor.svg)
+  ];
+  var ALLOWED_RESOURCE_ATTRIBUTES_SET = new Set(ALLOWED_RESOURCE_ATTRIBUTES);
+  var ALLOWED_ATTRIBUTES_SET = /* @__PURE__ */ new Set([
+    "href",
+    "src",
+    // Presentation
+    "fill",
+    "stroke",
+    "strokeWidth",
+    "opacity",
+    "transform",
+    // Geometry
+    "x",
+    "y",
+    "cx",
+    "cy",
+    "r",
+    "rx",
+    "ry",
+    "width",
+    "height",
+    "d",
+    "x1",
+    "y1",
+    "x2",
+    "y2",
+    "points",
+    // Text
+    "fontSize",
+    "fontFamily",
+    "textAnchor",
+    // Structure
+    "id",
+    "class",
+    "viewBox",
+    "preserveAspectRatio",
+    // Gradient/Pattern
+    "offset",
+    "stopColor",
+    "stopOpacity",
+    "gradientTransform",
+    // Clippath/Mask
+    "clipPath",
+    "mask",
+    // Filter
+    "filter",
+    "stdDeviation",
+    "in",
+    "in2",
+    "result",
+    "mode",
+    ...ALLOWED_RESOURCE_ATTRIBUTES
+  ]);
+  function sanitiseAttributeValue(name, value) {
+    const nameLower = name.toLowerCase();
+    if (!ALLOWED_ATTRIBUTES_SET.has(nameLower)) {
+      console.warn("Attribute not in whitelist: ", nameLower);
+      return void 0;
+    }
+    if (nameLower === "fill" || nameLower === "stroke" || nameLower === "stopColor") {
+      const str = String(value);
+      if (str.includes("url(") && !/^url\(#[^)]+\)$/.test(str)) {
+        console.warn('Attribute "' + nameLower + '" blocked: url() references must be internal url(#id), got:', value);
+        return void 0;
+      }
+      return value;
+    }
+    if (ALLOWED_RESOURCE_ATTRIBUTES_SET.has(nameLower)) {
+      const str = String(value);
+      if (str.startsWith("#")) {
+        return value;
+      }
+      if (/^url\(#[^)]+\)$/.test(str)) {
+        return value;
+      }
+      return void 0;
+    }
+    return value;
+  }
+  function createElement(tagName, normalisedProps, style, children, textContent) {
+    if (!ALLOWED_SVG_TAGS_LOWER_CASE.has(tagName.toLowerCase())) return null;
     const element = document.createElementNS(SVG_NS, tagName);
-    for (const propName in props) {
-      element.setAttribute(camelCaseToKebabWordIfNeeded(propName), props[propName]);
+    for (const propName in normalisedProps) {
+      element.setAttribute(
+        camelCaseToKebabWordIfNeeded(propName),
+        sanitiseAttributeValue(propName, normalisedProps[propName])
+      );
     }
     if (style) {
       for (const styleProp in style) {
@@ -2048,6 +2271,7 @@ var PixodeskAnimatorReact = (() => {
         element.appendChild(child);
       }
     }
+    if (textContent) element.textContent = textContent;
     return element;
   }
   function resolveStyle(style, defs) {
@@ -2062,6 +2286,7 @@ var PixodeskAnimatorReact = (() => {
     const propsCopy = {};
     for (const key of Object.keys(props)) {
       if (INTERNAL_ATTRS.has(key)) continue;
+      if (key === "style") continue;
       let value = props[key];
       if (COLOUR_ATTR_NAMES.has(key) && Array.isArray(value)) {
         propsCopy[key] = toRGBA(value);
@@ -2097,7 +2322,8 @@ var PixodeskAnimatorReact = (() => {
       type || "g",
       getNormalizedProps(props),
       resolvedStyle,
-      childElements
+      childElements,
+      props[TEXT_ATTR] || props[TEXT_CONTENT_ATTR]
     );
   }
   function setupAnimationTriggers(api, config) {
@@ -2175,28 +2401,6 @@ var PixodeskAnimatorReact = (() => {
     }
     return api;
   }
-  var PX_ANIM_SRC_ATTR_NAME = "data-px-animation-src";
-  var PX_ANIM_ATTR_NAME = "_px_animator";
-  function isPxElementFileFormat(fileJson) {
-    if (!(fileJson && typeof fileJson === "object" && !Array.isArray(fileJson))) {
-      return false;
-    }
-    return fileJson["type"] === "svg" || fileJson["tagName"] === "svg";
-  }
-  function getAnimatorConfig(doc) {
-    var _a, _b;
-    return (doc == null ? void 0 : doc.animator) || ((_a = doc == null ? void 0 : doc.meta) == null ? void 0 : _a.animator) || (doc == null ? void 0 : doc.animation) || ((_b = doc == null ? void 0 : doc.meta) == null ? void 0 : _b.animation);
-  }
-  function getDefs(doc) {
-    var _a;
-    if (!doc) return void 0;
-    return doc.defs || ((_a = doc.meta) == null ? void 0 : _a.defs);
-  }
-  function getBindings(doc) {
-    var _a;
-    if (!doc) return void 0;
-    return doc.bindings || ((_a = doc.meta) == null ? void 0 : _a.bindings);
-  }
   function parsePathCommands(d) {
     const tokens = d.split(/([MLCZmlcz]|[\s,]+)/).map((t) => t.trim()).filter((t) => t && t !== ",");
     const commands = [];
@@ -2350,6 +2554,111 @@ var PixodeskAnimatorReact = (() => {
     }
     return results;
   }
+  function interpolateValue(propName, a, b, t) {
+    var _a, _b;
+    if (propName === "d") {
+      const aPaths = (_a = a == null ? void 0 : a.paths) != null ? _a : Array.isArray(a) ? a : [];
+      const bPaths = (_b = b == null ? void 0 : b.paths) != null ? _b : Array.isArray(b) ? b : [];
+      return { paths: interpolateBeziers(aPaths, bPaths, t) };
+    }
+    if (COLOUR_ATTR_NAMES.has(propName)) {
+      return interpolateColor(a || [0, 0, 0, 1], b || [0, 0, 0, 1], t);
+    }
+    if (TRANSFORM_FN_NAMES.has(propName) || propName === "stroke-dasharray" || propName === "strokeDasharray") {
+      return interpolateVec(a || [], b || [], t);
+    }
+    return interpolateNum(+(a || 0), +(b || 0), t);
+  }
+  function expandLoopKeyframes(propName, keyframes, loop, duration) {
+    var _a, _b, _c, _d, _e;
+    const totalIntervals = keyframes.length - 1;
+    const segCount = clamp((_a = loop.segmentCount) != null ? _a : totalIntervals, 1, totalIntervals);
+    let segKfs;
+    if (loop.before) {
+      segKfs = keyframes.slice(0, segCount + 1);
+    } else {
+      segKfs = keyframes.slice(totalIntervals - segCount);
+    }
+    const firstT = (_b = keyframes[0].t) != null ? _b : 0;
+    const lastT = (_c = keyframes[keyframes.length - 1].t) != null ? _c : 0;
+    let fillStart, fillEnd;
+    if (loop.before) {
+      fillStart = 0;
+      fillEnd = firstT;
+    } else {
+      fillStart = lastT;
+      fillEnd = duration;
+    }
+    const fillDuration = fillEnd - fillStart;
+    if (fillDuration <= 0) return keyframes;
+    const segStartT = (_d = segKfs[0].t) != null ? _d : 0;
+    const segEndT = (_e = segKfs[segKfs.length - 1].t) != null ? _e : 0;
+    const segDuration = segEndT - segStartT;
+    if (segDuration <= 0) return keyframes;
+    const template = segKfs.map((kf) => ({
+      relT: (kf.t - segStartT) / segDuration,
+      v: kf.v,
+      e: kf.e
+    }));
+    const fullReps = Math.floor(fillDuration / segDuration);
+    const remainder = fillDuration - fullReps * segDuration;
+    const partialFraction = remainder / segDuration;
+    const looped = [];
+    function appendRep(repStart, isReversed, partial) {
+      let entries;
+      if (isReversed) {
+        entries = [];
+        for (let i = template.length - 1; i >= 0; i--) {
+          entries.push({
+            relT: 1 - template[i].relT,
+            v: template[i].v,
+            // Easing for reversed transition: use reversed easing from the forward "from" keyframe
+            e: i > 0 ? reverseEasing(template[i - 1].e) : void 0
+          });
+        }
+      } else {
+        entries = template;
+      }
+      const cutRelT = partial !== void 0 ? partial : 1;
+      for (let i = 0; i < entries.length; i++) {
+        const entry = entries[i];
+        if (entry.relT > cutRelT + 1e-9) {
+          const prev = entries[i - 1];
+          const intervalSpan = entry.relT - prev.relT;
+          const localFrac = (cutRelT - prev.relT) / intervalSpan;
+          const easedFrac = prev.e ? cubicBezier(prev.e)(localFrac) : localFrac;
+          const cutValue = interpolateValue(propName, prev.v, entry.v, easedFrac);
+          const { left: leftEasing } = splitEasing(prev.e, localFrac);
+          if (looped.length > 0 && prev.relT <= cutRelT) {
+            looped[looped.length - 1].e = leftEasing;
+          }
+          looped.push({ t: repStart + cutRelT * segDuration, v: cutValue, e: void 0 });
+          return;
+        }
+        looped.push({
+          t: repStart + entry.relT * segDuration,
+          v: entry.v,
+          e: i < entries.length - 1 ? entry.e : void 0
+        });
+      }
+    }
+    for (let rep = 0; rep < fullReps; rep++) {
+      const distFromBoundary = loop.before ? fullReps - 1 - rep : rep;
+      const isReversed = !!loop.alternate && distFromBoundary % 2 === 0;
+      const repStart = fillStart + rep * segDuration;
+      appendRep(repStart, isReversed);
+    }
+    if (partialFraction > 1e-9) {
+      const isReversed = !!loop.alternate && fullReps % 2 === 0;
+      const repStart = fillStart + fullReps * segDuration;
+      appendRep(repStart, isReversed, partialFraction);
+    }
+    if (loop.before) {
+      return [...looped, ...keyframes];
+    } else {
+      return [...keyframes, ...looped];
+    }
+  }
   function normalizeKeyframes(propName, propAnim, duration, defs) {
     var _a, _b, _c, _d, _e;
     const keyframes = propAnim.keyframes || propAnim.kfs || [];
@@ -2374,6 +2683,11 @@ var PixodeskAnimatorReact = (() => {
       var _a2, _b2;
       return ((_a2 = a.t) != null ? _a2 : 0) - ((_b2 = b.t) != null ? _b2 : 0);
     });
+    const loopRaw = propAnim.loop;
+    const loop = loopRaw === true ? {} : loopRaw || void 0;
+    if (loop && normalized.length >= 2) {
+      return expandLoopKeyframes(propName, normalized, loop, duration);
+    }
     return normalized;
   }
   function mergeAnimationDefinitions(animations) {
@@ -2804,40 +3118,56 @@ var PixodeskAnimatorReact = (() => {
     };
     return adapter;
   }
+  function createCssKf(kf, t, propName, unsupportedSet) {
+    var _a, _b;
+    let value = (_a = kf.v) != null ? _a : kf.value;
+    const e = (_b = kf.e) != null ? _b : kf.easing;
+    const cssKf = {
+      offset: t,
+      easing: e && Array.isArray(e) ? "cubic-bezier(" + e.join(",") + ")" : void 0
+    };
+    let cssValue;
+    let cssKey = propName;
+    if (COLOUR_ATTR_NAMES.has(propName) && Array.isArray(value)) {
+      cssValue = toRGBA(value);
+    } else if (TRANSFORM_FN_NAMES.has(propName)) {
+      if (Array.isArray(value)) {
+        if (propName === "translate") value = value.map((v) => v + "px");
+        value = value.join(",");
+      }
+      if (propName === "rotate") value = value + "deg";
+      cssValue = propName + "(" + value + ")";
+      cssKey = "transform";
+    } else {
+      cssValue = "" + value;
+    }
+    if (!CSS.supports(cssKey, cssValue)) unsupportedSet.add(cssKey);
+    cssKey = kebabToCamelCaseWord(cssKey);
+    cssKf[cssKey] = cssValue;
+    return cssKf;
+  }
   function convertToWebApiKeyframes(animDef, unsupportedSet, config) {
-    var _a, _b, _c, _d;
+    var _a, _b;
     const result = /* @__PURE__ */ new Map();
     for (const [propName, propAnim] of Object.entries(animDef)) {
       const keyframes = propAnim.kfs || propAnim.keyframes || [];
       const cssKeyframes = [];
-      for (const kf of keyframes) {
+      for (let i = 0; i < keyframes.length; i++) {
+        const kf = keyframes[i];
         let t = (_b = (_a = kf.t) != null ? _a : kf.time) != null ? _b : 0;
         t = clamp(t / (config.duration || 1), 0, 1);
-        let value = (_c = kf.v) != null ? _c : kf.value;
-        const e = (_d = kf.e) != null ? _d : kf.easing;
-        const cssKf = {
-          offset: t,
-          easing: e && Array.isArray(e) ? "cubic-bezier(" + e.join(",") + ")" : void 0
-        };
-        let cssValue;
-        let cssKey = propName;
-        if (COLOUR_ATTR_NAMES.has(propName) && Array.isArray(value)) {
-          cssValue = toRGBA(value);
-        } else if (TRANSFORM_FN_NAMES.has(propName)) {
-          if (Array.isArray(value)) {
-            if (propName === "translate") value = value.map((v) => v + "px");
-            value = value.join(",");
-          }
-          if (propName === "rotate") value = value + "deg";
-          cssValue = propName + "(" + value + ")";
-          cssKey = "transform";
-        } else {
-          cssValue = "" + value;
+        const cssKf = createCssKf(kf, t, propName, unsupportedSet);
+        if (i === 0 && (cssKf.offset || 0) > 0) {
+          cssKeyframes.push(__spreadProps(__spreadValues({}, cssKf), {
+            offset: 0
+          }));
         }
-        if (!CSS.supports(cssKey, cssValue)) unsupportedSet.add(cssKey);
-        cssKey = kebabToCamelCaseWord(cssKey);
-        cssKf[cssKey] = cssValue;
         cssKeyframes.push(cssKf);
+        if (i === keyframes.length - 1 && (cssKf.offset || 0) < 1) {
+          cssKeyframes.push(__spreadProps(__spreadValues({}, cssKf), {
+            offset: 1
+          }));
+        }
       }
       if (cssKeyframes.length > 0) {
         result.set(propName, cssKeyframes);
@@ -2878,17 +3208,17 @@ var PixodeskAnimatorReact = (() => {
         console.warn('createWebApiAnimator: No elements found for selector "' + selector + '"');
       }
       const keyframesMap = convertToWebApiKeyframes(animDef, unsupportedSet, config);
+      const positiveDelay = config.delay && config.delay > 0 ? config.delay : void 0;
+      const seekPosition = config.delay && config.delay < 0 && config.duration ? -config.delay % config.duration : void 0;
+      const effectOptions = {
+        duration: config.duration,
+        delay: positiveDelay,
+        fill: config.fill,
+        direction: config.direction,
+        iterations
+      };
       for (let i = 0; i < elements.length; i++) {
         const element = elements[i];
-        const positiveDelay = config.delay && config.delay > 0 ? config.delay : void 0;
-        const seekPosition = config.delay && config.delay < 0 && config.duration ? -config.delay % config.duration : void 0;
-        const effectOptions = {
-          duration: config.duration,
-          delay: positiveDelay,
-          fill: config.fill,
-          direction: config.direction,
-          iterations
-        };
         for (const [, keyframes] of keyframesMap) {
           if (keyframes.length > 0) {
             try {
@@ -2940,7 +3270,20 @@ var PixodeskAnimatorReact = (() => {
         (_a = callbacks == null ? void 0 : callbacks.onCancel) == null ? void 0 : _a.call(callbacks);
       },
       "finish": () => {
-        animations.forEach((a) => a.finish());
+        var _a;
+        for (const a of animations) {
+          try {
+            if (((_a = a.effect) == null ? void 0 : _a.getTiming().iterations) === Infinity) {
+              a.effect.updateTiming({ iterations: 1 });
+              a.finish();
+              a.effect.updateTiming({ iterations: Infinity });
+            } else {
+              a.finish();
+            }
+          } catch (e) {
+            a.cancel();
+          }
+        }
       },
       "setPlaybackRate": (rate) => {
         animations.forEach((a) => a.playbackRate = rate);
@@ -3069,7 +3412,7 @@ var PixodeskAnimatorReact = (() => {
               value[styleProp] = replaceUrlRefs(styleValue, idMap);
             }
           }
-        } else if (typeof value === "object" && value !== null && key !== "animate") {
+        } else if (typeof value === "object" && value !== null && key !== ANIMATE_ATTR) {
           updateRefs(value);
         }
       }
@@ -3431,6 +3774,41 @@ var PixodeskAnimatorReact = (() => {
     );
   };
   var PixodeskSvgAnimator_default = PixodeskSvgAnimator;
+
+  // src/PixodeskSvgCssAnimator.tsx
+  var import_react3 = __toESM(require_react(), 1);
+  var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
+  var PixodeskSvgCssAnimator = ({ className, style, children, startOn = "load", outAction = "continue" }) => {
+    const [state, setState] = (0, import_react3.useState)(startOn === "load" ? "playing" : "idle");
+    const ref = (0, import_react3.useRef)(null);
+    (0, import_react3.useEffect)(() => {
+      if (startOn !== "scrollIntoView") return;
+      const el = ref.current;
+      if (!el) return;
+      const outState = outAction === "reset" ? "idle" : outAction === "pause" ? "paused" : "playing";
+      const observer = new IntersectionObserver(
+        ([entry]) => setState(entry.isIntersecting ? "playing" : outState),
+        { threshold: 0.1 }
+      );
+      observer.observe(el);
+      return () => observer.disconnect();
+    }, [startOn, outAction]);
+    const goOut = () => setState(
+      outAction === "reset" ? "idle" : outAction === "pause" ? "paused" : "playing"
+    );
+    const handlers = startOn === "mouseOver" ? { onMouseEnter: () => setState("playing"), onMouseLeave: goOut } : startOn === "click" ? { onClick: () => state === "playing" ? goOut() : setState("playing") } : {};
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        ref,
+        className: className + (state === "playing" ? "px-anim-enabled px-anim-playing" : state === "paused" ? "px-anim-enabled" : ""),
+        style,
+        ...handlers,
+        children
+      }
+    );
+  };
+  var PixodeskSvgCssAnimator_default = PixodeskSvgCssAnimator;
   return __toCommonJS(index_exports);
 })();
 /*! Bundled license information: