@pixodesk/svg-animator-react 1.0.21 → 1.0.22

package/dist/index.umd.js

@@ -2371,6 +2371,7 @@ var PixodeskAnimatorReact = (() => {
     resetOnFinish: px.boolean().optional(),
     definitions: PxDefsSchema.optional(),
     animate: px.record(PxElementAnimationSchema).optional(),
+    timeline: px.string().optional(),
     debug: px.boolean().optional(),
     debugInstName: px.string().optional()
   }));
@@ -2453,6 +2454,17 @@ var PixodeskAnimatorReact = (() => {
     px.object({ value: px.array(PxGradientStopSchema) }),
     px.object({ keyframes: px.array(PxKeyframeSchema) })
   ]);
+  var PxGradientGeometryAnimationSchema = implementsInterface()(px.object({
+    gradientX1: PxPropertyAnimationSchema.optional(),
+    gradientY1: PxPropertyAnimationSchema.optional(),
+    gradientX2: PxPropertyAnimationSchema.optional(),
+    gradientY2: PxPropertyAnimationSchema.optional(),
+    gradientCx: PxPropertyAnimationSchema.optional(),
+    gradientCy: PxPropertyAnimationSchema.optional(),
+    gradientFx: PxPropertyAnimationSchema.optional(),
+    gradientFy: PxPropertyAnimationSchema.optional(),
+    gradientR: PxPropertyAnimationSchema.optional()
+  }));
   var PxFillGradientEffectSchema = implementsInterface()(px.object({
     type: px.enum([PxGradientType.linear, PxGradientType.radial]),
     p1: px.tuple([px.number(), px.number()]).optional(),
@@ -2463,7 +2475,8 @@ var PixodeskAnimatorReact = (() => {
     stops: PxAnimatableGradientStopsSchema.optional(),
     gradientUnits: px.string().optional(),
     spreadMethod: px.string().optional(),
-    gradientTransform: px.string().optional()
+    gradientTransform: px.string().optional(),
+    animate: PxGradientGeometryAnimationSchema.optional()
   }));
   var PxStrokeGradientEffectSchema = PxFillGradientEffectSchema;
   var PxTextPathEffectSchema = implementsInterface()(px.object({
@@ -4453,6 +4466,7 @@ var PixodeskAnimatorReact = (() => {
     return rec;
   }
   function readAnimatable(raw) {
+    var _a, _b;
     if (raw === void 0) return {
       kind: "absent"
       /* Absent */
@@ -4460,13 +4474,29 @@ var PixodeskAnimatorReact = (() => {
     if (Array.isArray(raw)) return { kind: "static", value: raw };
     if (typeof raw === "object") {
       const obj = raw;
-      if (obj.keyframes) {
-        return { kind: "animated", keyframes: obj.keyframes, autoOrient: obj.autoOrient, loop: obj.loop };
+      const kfs = (_a = obj.keyframes) != null ? _a : obj.kfs;
+      if (kfs) {
+        return { kind: "animated", keyframes: kfs.map(normaliseKeyframe), autoOrient: obj.autoOrient, loop: obj.loop };
       }
-      if (obj.value !== void 0) return { kind: "static", value: obj.value };
+      const staticValue = (_b = obj.value) != null ? _b : obj.v;
+      if (staticValue !== void 0) return { kind: "static", value: staticValue };
     }
     return { kind: "static", value: raw };
   }
+  function normaliseKeyframe(kf) {
+    if (!kf || typeof kf !== "object") return kf;
+    const k = kf;
+    if (k.t === void 0 && k.v === void 0 && k.e === void 0 && k.to === void 0 && k.ti === void 0) {
+      return kf;
+    }
+    const out = __spreadValues2({}, k);
+    if (out.time === void 0 && k.t !== void 0) out.time = k.t;
+    if (out.value === void 0 && k.v !== void 0) out.value = k.v;
+    if (out.easing === void 0 && k.e !== void 0) out.easing = k.e;
+    if (out.tangentOut === void 0 && k.to !== void 0) out.tangentOut = k.to;
+    if (out.tangentIn === void 0 && k.ti !== void 0) out.tangentIn = k.ti;
+    return out;
+  }
   function readStaticOrigin(raw, ctx) {
     var _a;
     const o = readAnimatable(raw);
@@ -7077,8 +7107,14 @@ var PixodeskAnimatorReact = (() => {
         break;
       }
       case "mouseOver": {
-        const mouseOverHandler = () => start();
-        const mouseOutHandler = () => handleEndAction();
+        let enteredOnce = false;
+        const mouseOverHandler = () => {
+          enteredOnce = true;
+          start();
+        };
+        const mouseOutHandler = () => {
+          if (enteredOnce) handleEndAction();
+        };
         root.addEventListener("mouseenter", mouseOverHandler);
         root.addEventListener("mouseleave", mouseOutHandler);
         break;
@@ -7095,17 +7131,32 @@ var PixodeskAnimatorReact = (() => {
         break;
       }
       case "scrollIntoView": {
+        const effectiveRatio = (entry) => {
+          var _a, _b;
+          const target = entry.boundingClientRect;
+          const visible = entry.intersectionRect;
+          if (!(target == null ? void 0 : target.height) || !visible) return entry.intersectionRatio;
+          const live = typeof window !== "undefined" && window.innerHeight ? window.innerHeight : Infinity;
+          const declared = (_b = (_a = entry.rootBounds) == null ? void 0 : _a.height) != null ? _b : Infinity;
+          const viewport = Math.min(live, declared);
+          const denom = Math.min(target.height, Number.isFinite(viewport) ? viewport : target.height);
+          return denom > 0 ? visible.height / denom : entry.intersectionRatio;
+        };
+        const thresholdSteps = Array.from({ length: 21 }, (_, i) => i / 20);
+        let wasIntersecting = false;
         const observer = new IntersectionObserver(
           (entries) => {
             entries.forEach((entry) => {
-              if (entry.isIntersecting && entry.intersectionRatio >= scrollIntoViewThreshold) {
+              if (entry.isIntersecting && effectiveRatio(entry) >= scrollIntoViewThreshold) {
+                wasIntersecting = true;
                 start();
-              } else {
+              } else if (wasIntersecting) {
+                wasIntersecting = false;
                 handleEndAction();
               }
             });
           },
-          { threshold: scrollIntoViewThreshold }
+          { threshold: thresholdSteps }
         );
         observer.observe(root);
         break;