fix(studio): display absolute times in animation panel for clip-relative positions

Co-authored-by: Miguel Ángel <miguel07alm@protonmail.com>

Author: miguel-heygen

packages/studio/src/components/editor/AnimationCard.tsx

@@ -237,6 +237,7 @@ function parseNumericOrString(raw: string): number | string {
 
 interface AnimationCardProps {
   animation: GsapAnimation;
+  elementStart?: number;
   defaultExpanded: boolean;
   onUpdateProperty: (animationId: string, property: string, value: number | string) => void;
   onUpdateMeta: (
@@ -265,6 +266,7 @@ interface AnimationCardProps {
 // fallow-ignore-next-line complexity
 export const AnimationCard = memo(function AnimationCard({
   animation,
+  elementStart = 0,
   defaultExpanded,
   onUpdateProperty,
   onUpdateMeta,
@@ -342,9 +344,9 @@ export const AnimationCard = memo(function AnimationCard({
     (raw: string) => {
       const num = Number(raw);
       if (Number.isFinite(num) && num >= 0)
-        onUpdateMeta(animation.id, { position: Math.max(0, num) });
+        onUpdateMeta(animation.id, { position: Math.max(0, num - elementStart) });
     },
-    [animation.id, onUpdateMeta],
+    [animation.id, elementStart, onUpdateMeta],
   );
 
   const [copied, setCopied] = useState(false);
@@ -354,10 +356,12 @@ export const AnimationCard = memo(function AnimationCard({
   const easeLabel = easeName.startsWith("custom(")
     ? "Custom curve"
     : (EASE_LABELS[easeName] ?? easeName);
+  const absolutePosition =
+    typeof animation.position === "number" ? animation.position + elementStart : animation.position;
   const endTime =
-    typeof animation.position === "number"
-      ? animation.position + (animation.duration ?? 0)
-      : animation.position;
+    typeof absolutePosition === "number"
+      ? absolutePosition + (animation.duration ?? 0)
+      : absolutePosition;
 
   const summary = useMemo(() => buildTweenSummary(animation), [animation]);
 
@@ -375,9 +379,9 @@ export const AnimationCard = memo(function AnimationCard({
           {methodLabel}
         </span>
         <span className="text-[11px] font-medium text-neutral-400" title="When this effect plays">
-          {typeof animation.position === "number"
-            ? `${parseFloat(animation.position.toFixed(3))}s`
-            : animation.position}{" "}
+          {typeof absolutePosition === "number"
+            ? `${parseFloat(absolutePosition.toFixed(3))}s`
+            : absolutePosition}{" "}
           – {typeof endTime === "number" ? `${parseFloat(endTime.toFixed(3))}s` : endTime}
         </span>
         <span className="ml-auto text-[10px] text-neutral-500" title={easeName}>
@@ -439,11 +443,11 @@ export const AnimationCard = memo(function AnimationCard({
               <MetricField
                 label="Starts at"
                 value={
-                  typeof animation.position === "string"
-                    ? animation.position
-                    : String(parseFloat(Math.max(0, animation.position).toFixed(3)))
+                  typeof absolutePosition === "string"
+                    ? absolutePosition
+                    : String(parseFloat(Math.max(0, absolutePosition).toFixed(3)))
                 }
-                suffix={typeof animation.position === "number" ? "s" : undefined}
+                suffix={typeof absolutePosition === "number" ? "s" : undefined}
                 tooltip="When this effect begins on the timeline"
                 onCommit={commitPosition}
               />

packages/studio/src/components/editor/GsapAnimationSection.tsx

@@ -7,6 +7,7 @@ import { AnimationCard } from "./AnimationCard";
 
 interface GsapAnimationSectionProps {
   animations: GsapAnimation[];
+  elementStart?: number;
   multipleTimelines?: boolean;
   unsupportedTimelinePattern?: boolean;
   onUpdateProperty: (animationId: string, property: string, value: number | string) => void;
@@ -36,6 +37,7 @@ interface GsapAnimationSectionProps {
 
 export const GsapAnimationSection = memo(function GsapAnimationSection({
   animations,
+  elementStart = 0,
   multipleTimelines,
   unsupportedTimelinePattern,
   onUpdateProperty,
@@ -75,6 +77,7 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
             <AnimationCard
               key={anim.id}
               animation={anim}
+              elementStart={elementStart}
               defaultExpanded={index === 0}
               onUpdateProperty={onUpdateProperty}
               onUpdateMeta={onUpdateMeta}

packages/studio/src/components/editor/PropertyPanel.tsx

@@ -510,6 +510,7 @@ export const PropertyPanel = memo(function PropertyPanel({
           onAddGsapAnimation && (
             <GsapAnimationSection
               animations={gsapAnimations}
+              elementStart={elStart}
               multipleTimelines={gsapMultipleTimelines}
               unsupportedTimelinePattern={gsapUnsupportedTimelinePattern}
               onUpdateProperty={onUpdateGsapProperty}