fix(core): move keyframed tweens across their start before the forward step

Re-crossing a keyframed tween after the timeline's forward render made it
win over a later same-time sibling (a set after it at the same time showed
the keyframe, not the set). The keyframed tweens that start at the target
are now moved across their start during the step from below, and the
timeline's own forward step renders them with every sibling, in authored
order.

Author: miguel-heygen

packages/core/src/runtime/adapters/gsap.steps.test.ts

@@ -90,6 +90,33 @@ describe("gsap adapter at a tween's start", () => {
     expect(gsap.getProperty(box, "x")).toBe(0);
   });
 
+  it.each([
+    { order: "keyframes, then a set", x: 42 },
+    { order: "a set, then keyframes", x: 5 },
+  ])("keeps the authored order of $order at the seek time", ({ order, x }) => {
+    const box = document.body.appendChild(document.createElement("div"));
+    const timeline = gsap.timeline({ paused: true });
+    timeline.from(box, { x: -60, duration: 2, ease: "none" }, 0);
+    const keyframes = () =>
+      timeline.to(box, { keyframes: { "0%": { x: 5 }, "100%": { x: 60 } }, duration: 1 }, 2);
+    const set = () => timeline.set(box, { x: 42 }, 2);
+    if (order.startsWith("keyframes")) {
+      keyframes();
+      set();
+    } else {
+      set();
+      keyframes();
+    }
+    const adapter = createGsapAdapter({
+      getTimeline: () => timeline as unknown as RuntimeTimelineLike,
+    });
+    for (const from of [0, 1, 2, 2.5, 3]) {
+      timeline.totalTime(from, true);
+      adapter.seek({ time: 2 });
+      expect(gsap.getProperty(box, "x")).toBe(x);
+    }
+  });
+
   it("shows a keyframed tween's start inside a nested timeline, seeking onto it twice", () => {
     const box = document.body.appendChild(document.createElement("div"));
     const timeline = gsap.timeline({ paused: true });

packages/core/src/runtime/adapters/gsap.ts

@@ -6,7 +6,7 @@ type GsapAdapterDeps = {
 
 /**
  * Re-renders a timeline already at `t`, silently, from just below (above at 0) so same-time steps apply in authored
- * order. That step skips a keyframed tween already at its start, so each one re-crosses its own start alone.
+ * order. That step skips a keyframed tween already at its start, so each one is first moved across its start alone.
  */
 export function rerenderGsapTimelineAt(
   timeline: {
@@ -16,8 +16,8 @@ export function rerenderGsapTimelineAt(
   t: number,
 ): void {
   timeline.totalTime(t >= 0.001 ? t - 0.001 : t + 0.001, true);
+  primeKeyframedTweensStartingAt(timeline.getChildren?.(false, true, true) ?? [], t);
   timeline.totalTime(t, true);
-  recrossTweensStartingAt(timeline.getChildren?.(false, true, true) ?? [], t);
 }
 
 type GsapAnimation = {
@@ -44,15 +44,14 @@ const playsForward = (value: unknown): value is GsapAnimation => {
   );
 };
 
-function recrossTweensStartingAt(children: unknown[], time: number): void {
+function primeKeyframedTweensStartingAt(children: unknown[], time: number): void {
   for (const child of children.filter(playsForward)) {
     const local = (time - child.startTime()) * child.timeScale();
     if (Math.abs(local) < 1e-9 && child.vars?.keyframes) {
       child.render(BELOW_GSAP_TIME_RESOLUTION, true);
       child.render(-BELOW_GSAP_TIME_RESOLUTION, true);
-      child.render(0, true);
     } else if (child.getChildren && local > 0 && local <= child.totalDuration()) {
-      recrossTweensStartingAt(child.getChildren(false, true, true), local);
+      primeKeyframedTweensStartingAt(child.getChildren(false, true, true), local);
     }
   }
 }