@pixodesk/svg-animator-web 1.0.21 → 1.0.22

package/dist/index.cjs

@@ -742,6 +742,7 @@ var PxAnimatorConfigSchema = implementsInterface()(px.object({
   resetOnFinish: px.boolean().optional(),
   definitions: PxDefsSchema.optional(),
   animate: px.record(PxElementAnimationSchema).optional(),
+  timeline: px.string().optional(),
   debug: px.boolean().optional(),
   debugInstName: px.string().optional()
 }));
@@ -833,6 +834,17 @@ var PxAnimatableGradientStopsSchema = px.union([
   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(),
@@ -843,7 +855,8 @@ var PxFillGradientEffectSchema = implementsInterface()(px.object({
   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({
@@ -2840,6 +2853,7 @@ function partsRecord(part, value, origin) {
   return rec;
 }
 function readAnimatable(raw) {
+  var _a, _b;
   if (raw === void 0) return {
     kind: "absent"
     /* Absent */
@@ -2847,13 +2861,29 @@ function readAnimatable(raw) {
   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);
@@ -5806,8 +5836,14 @@ function setupAnimationTriggers(api, config) {
       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;
@@ -5824,17 +5860,32 @@ function setupAnimationTriggers(api, config) {
       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;