@hyperframes/parsers 0.7.71 → 0.7.72

package/dist/index.js

@@ -176,14 +176,18 @@ var SUPPORTED_EASES = [
   "bounce.in",
   "bounce.out",
   "bounce.inOut",
+  "circ.inOut",
   "expo.in",
   "expo.out",
   "expo.inOut",
+  "elastic.out(1,0.3)",
+  "elastic.inOut(1,0.3)",
   "spring-gentle",
   "spring-bouncy",
   "spring-stiff",
   "spring-wobbly",
   "spring-heavy",
+  "hold",
   "steps(1)"
 ];
 
@@ -411,6 +415,34 @@ function gsapAnimationsToKeyframes(animations, elementStartTime, options) {
 import * as recast from "recast";
 import { parse as babelParse } from "@babel/parser";
 
+// src/gsapObjectArrayTiming.ts
+var roundPercentage = (percentage) => Math.round(percentage * 10) / 10;
+function getObjectArrayKeyframeTiming(durations) {
+  const hasAuthoredDuration = durations.some((duration) => duration !== void 0);
+  if (hasAuthoredDuration) {
+    if (!durations.every(
+      (duration) => typeof duration === "number" && Number.isFinite(duration) && duration > 0
+    )) {
+      return null;
+    }
+    const totalDuration = durations.reduce((sum, duration) => sum + duration, 0);
+    let cumulative = 0;
+    return {
+      percentages: durations.map((duration) => {
+        cumulative += duration;
+        return roundPercentage(cumulative / totalDuration * 100);
+      }),
+      totalDuration
+    };
+  }
+  const lastIndex = durations.length - 1;
+  return {
+    percentages: durations.map(
+      (_, index) => lastIndex > 0 ? roundPercentage(index / lastIndex * 100) : 0
+    )
+  };
+}
+
 // src/springEase.ts
 var SPRING_PRESETS = [
   { name: "spring-gentle", label: "Gentle", mass: 1, stiffness: 100, damping: 15 },
@@ -1451,6 +1483,8 @@ function parsePercentageKeyframes(node, scope, source) {
       for (const [k, v] of Object.entries(record)) {
         if (k === "ease" && typeof v === "string") {
           kfEase = v;
+        } else if (k === "duration") {
+          continue;
         } else if (typeof v === "number" || typeof v === "string") {
           properties[k] = v;
         }
@@ -1475,13 +1509,13 @@ function computeKeyframesTotalDuration(varsNode, scope, source) {
     (p) => (p.key?.name ?? p.key?.value) === "keyframes"
   )?.value;
   if (!kfNode || kfNode.type !== "ArrayExpression") return void 0;
-  let total = 0;
+  const durations = [];
   for (const el of kfNode.elements ?? []) {
     if (!el || el.type !== "ObjectExpression") continue;
     const r = objectExpressionToRecord(el, scope, source);
-    if (typeof r.duration === "number") total += r.duration;
+    durations.push(r.duration);
   }
-  return total > 0 ? total : void 0;
+  return getObjectArrayKeyframeTiming(durations)?.totalDuration;
 }
 function parseObjectArrayKeyframes(node, scope, source) {
   const elements = node.elements ?? [];
@@ -1493,7 +1527,7 @@ function parseObjectArrayKeyframes(node, scope, source) {
     let duration;
     let ease;
     for (const [k, v] of Object.entries(record)) {
-      if (k === "duration" && typeof v === "number") {
+      if (k === "duration") {
         duration = v;
       } else if (k === "ease" && typeof v === "string") {
         ease = v;
@@ -1503,31 +1537,13 @@ function parseObjectArrayKeyframes(node, scope, source) {
     }
     raw.push({ properties, duration, ease });
   }
-  const totalDuration = raw.reduce((sum, r) => sum + (r.duration ?? 0), 0);
-  const keyframes = [];
-  if (totalDuration > 0) {
-    let cumulative = 0;
-    for (const entry of raw) {
-      cumulative += entry.duration ?? 0;
-      const percentage = Math.round(cumulative / totalDuration * 100);
-      keyframes.push({
-        percentage,
-        properties: entry.properties,
-        ...entry.ease ? { ease: entry.ease } : {}
-      });
-    }
-  } else {
-    for (let i = 0; i < raw.length; i++) {
-      const entry = raw[i];
-      if (!entry) continue;
-      const percentage = raw.length > 1 ? Math.round(i / (raw.length - 1) * 100) : 0;
-      keyframes.push({
-        percentage,
-        properties: entry.properties,
-        ...entry.ease ? { ease: entry.ease } : {}
-      });
-    }
-  }
+  const timing = getObjectArrayKeyframeTiming(raw.map((entry) => entry.duration));
+  if (!timing) return void 0;
+  const keyframes = raw.map((entry, index) => ({
+    percentage: timing.percentages[index],
+    properties: entry.properties,
+    ...entry.ease ? { ease: entry.ease } : {}
+  }));
   return { format: "object-array", keyframes };
 }
 function parseSimpleArrayKeyframes(node, scope) {