From b0b7a5bb849c386ec9b7629c2c67f2db7bbf8566 Mon Sep 17 00:00:00 2001
From: yonava <yonavossandreae@gmail.com>
Date: Sun, 17 Aug 2025 00:55:02 +0200
Subject: [PATCH 1/2] animation sync

---
 .../products/src/markov-chains/MainView.vue   | 50 +++++++++++++++++++
 packages/shapes/src/animation/index.ts        |  6 +--
 .../shapes/src/animation/timeline/define.ts   |  7 ++-
 3 files changed, 58 insertions(+), 5 deletions(-)

diff --git a/packages/products/src/markov-chains/MainView.vue b/packages/products/src/markov-chains/MainView.vue
index 02242586..adb52889 100644
--- a/packages/products/src/markov-chains/MainView.vue
+++ b/packages/products/src/markov-chains/MainView.vue
@@ -7,18 +7,68 @@
   import MarkovChainInfo from "./ui/MarkovChainInfo.vue";
   import MarkovChainInfoLabels from "./ui/MarkovChainInfoLabels.vue";
   import { useMarkovColorizer } from "./ui/useMarkovColorizer";
+  import tinycolor from "tinycolor2";
+  import { watch, watchEffect } from "vue";
+  import GButton from "@magic/ui/graph/button/GButton.vue";
+  import gsap from "gsap";
+  import colors from "@magic/utils/colors";
 
   const graphWithCanvas = useGraphWithCanvas(MARKOV_CHAIN_GRAPH_SETTINGS);
   const { graph } = graphWithCanvas;
 
   const markov = useMarkovChain(graph);
   useMarkovColorizer(graph, markov).colorize();
+
+  const int = gsap.utils.interpolate(colors.RED_500, colors.RED_800);
+
+  const { play, stop } = graph.defineTimeline({
+    forShapes: ["circle"],
+    durationMs: 2000,
+    customInterpolations: {
+      stroke: {
+        value: (progress, schema) => ({
+          color: progress < 0.5 ? int(progress * 2) : int(2 - progress * 2),
+          lineWidth: schema.stroke?.lineWidth ?? 10,
+        }),
+        easing: "in-out",
+      },
+    },
+    synchronize: true,
+  });
+
+  graph.subscribe("onFocusChange", (newIds, oldIds) => {
+    const newNodeIds = Array.from(newIds).filter(graph.getNode);
+    const oldNodeIds = Array.from(oldIds).filter(graph.getNode);
+    newNodeIds.forEach((nodeId) => {
+      stop({ shapeId: nodeId });
+    });
+    const noLongerFocused = Array.from(oldNodeIds).filter(
+      (nodeId) => !newNodeIds.includes(nodeId)
+    );
+    for (const nodeId of noLongerFocused) {
+      if (markov.invalidStates.value.has(nodeId)) play({ shapeId: nodeId });
+    }
+  });
+
+  watch(markov.invalidStates, () => {
+    for (const node of graph.nodes.value) {
+      stop({ shapeId: node.id });
+      if (markov.invalidStates.value.has(node.id)) play({ shapeId: node.id });
+    }
+  });
+
+  const test = () => {
+    for (const nodeId of markov.invalidStates.value) {
+      play({ shapeId: nodeId });
+    }
+  };
 </script>
 
 <template>
   <GraphProduct v-bind="graphWithCanvas">
     <template #top-center>
       <MarkovChainInfo :markov="markov" />
+      <GButton @click="test">Test</GButton>
     </template>
 
     <template #bottom-center>
diff --git a/packages/shapes/src/animation/index.ts b/packages/shapes/src/animation/index.ts
index 3794e070..1442310c 100644
--- a/packages/shapes/src/animation/index.ts
+++ b/packages/shapes/src/animation/index.ts
@@ -29,10 +29,10 @@ export const useAnimatedShapes = () => {
   const schemaIdToShapeName: Map<SchemaId, ShapeName> = new Map();
 
   const { defineTimeline, timelineIdToTimeline } = useDefineTimeline({
-    play: ({ shapeId, timelineId, runCount = Infinity }) => {
+    play: ({ shapeId, timelineId, synchronize, runCount = Infinity }) => {
       const newAnimation: ActiveAnimation = {
-        runCount,
-        startedAt: Date.now(),
+        runCount: synchronize ? Infinity : runCount,
+        startedAt: synchronize ? 0 : Date.now(),
         timelineId,
       };
 
diff --git a/packages/shapes/src/animation/timeline/define.ts b/packages/shapes/src/animation/timeline/define.ts
index 41ce7b27..b52e5714 100644
--- a/packages/shapes/src/animation/timeline/define.ts
+++ b/packages/shapes/src/animation/timeline/define.ts
@@ -24,13 +24,15 @@ type IdField = {
 type TimelinePlayOptions = ShapeTarget & {
   /**
    * number of times this animation should run
+   *
+   * 👉 NOTE 👈 if {@link Timeline.synchronize} is set to true, `runCount` will always be `Infinity`
    * @default Infinity
    */
   runCount?: number;
 };
 
 export type UseDefineTimelineOptions = {
-  play: (options: TimelinePlayOptions & IdField) => void;
+  play: (options: TimelinePlayOptions & IdField & Pick<Timeline<any>, 'synchronize'>) => void;
   pause: (options: ShapeTarget & IdField) => void;
   resume: (options: ShapeTarget & IdField) => void;
   stop: (options: ShapeTarget & IdField) => void;
@@ -126,6 +128,7 @@ export type Timeline<T extends keyof ShapeNameToSchema> = DeepReadonly<
     forShapes: T[];
     keyframes?: TimelineKeyframe<SchemaWithDefaults[NoInfer<T>]>[];
     easing?: Partial<Record<keyof SchemaWithDefaults[NoInfer<T>], EasingOption>>;
+    synchronize?: boolean;
   } & TimelinePlaybackDuration &
   TimelinePlaybackDelay &
   TimelineCustomInterpolations<SchemaWithDefaults[NoInfer<T>]>
@@ -143,7 +146,7 @@ export const useDefineTimeline = (controls: UseDefineTimelineOptions) => {
     timelineIdToTimeline.set(timelineId, compiledTimeline);
 
     return {
-      play: (opts) => controls.play({ ...opts, timelineId }),
+      play: (opts) => controls.play({ ...opts, timelineId, synchronize: timeline.synchronize }),
       pause: (opts) => controls.pause({ ...opts, timelineId }),
       resume: (opts) => controls.resume({ ...opts, timelineId }),
       stop: (opts) => controls.stop({ ...opts, timelineId }),

From 9a8131123067f7644706a3d58966c48fb9002871 Mon Sep 17 00:00:00 2001
From: yonava <yonavossandreae@gmail.com>
Date: Sun, 17 Aug 2025 01:02:29 +0200
Subject: [PATCH 2/2] comments

---
 packages/products/src/markov-chains/MainView.vue | 3 +--
 packages/shapes/src/animation/autoAnimate.ts     | 1 +
 packages/shapes/src/animation/timeline/define.ts | 3 +++
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/products/src/markov-chains/MainView.vue b/packages/products/src/markov-chains/MainView.vue
index adb52889..576961bb 100644
--- a/packages/products/src/markov-chains/MainView.vue
+++ b/packages/products/src/markov-chains/MainView.vue
@@ -7,8 +7,7 @@
   import MarkovChainInfo from "./ui/MarkovChainInfo.vue";
   import MarkovChainInfoLabels from "./ui/MarkovChainInfoLabels.vue";
   import { useMarkovColorizer } from "./ui/useMarkovColorizer";
-  import tinycolor from "tinycolor2";
-  import { watch, watchEffect } from "vue";
+  import { watch } from "vue";
   import GButton from "@magic/ui/graph/button/GButton.vue";
   import gsap from "gsap";
   import colors from "@magic/utils/colors";
diff --git a/packages/shapes/src/animation/autoAnimate.ts b/packages/shapes/src/animation/autoAnimate.ts
index c73c6378..06ad1641 100644
--- a/packages/shapes/src/animation/autoAnimate.ts
+++ b/packages/shapes/src/animation/autoAnimate.ts
@@ -6,6 +6,7 @@ import type { DefineTimeline } from './timeline/define';
 import type { LooseSchema, LooseSchemaValue } from './types';
 
 export const AUTO_ANIMATE_DURATION_MS = 500;
+// properties supported by the auto animate feature
 const AUTO_ANIMATED_PROPERTIES = new Set([
   'at',
   'start',
diff --git a/packages/shapes/src/animation/timeline/define.ts b/packages/shapes/src/animation/timeline/define.ts
index b52e5714..97275a5a 100644
--- a/packages/shapes/src/animation/timeline/define.ts
+++ b/packages/shapes/src/animation/timeline/define.ts
@@ -128,6 +128,9 @@ export type Timeline<T extends keyof ShapeNameToSchema> = DeepReadonly<
     forShapes: T[];
     keyframes?: TimelineKeyframe<SchemaWithDefaults[NoInfer<T>]>[];
     easing?: Partial<Record<keyof SchemaWithDefaults[NoInfer<T>], EasingOption>>;
+    /**
+     * allow shapes to animate in sync even when invoking {@link TimelineControls.play} at different times
+     */
     synchronize?: boolean;
   } & TimelinePlaybackDuration &
   TimelinePlaybackDelay &