From 534380fc000def2ad2da3e1f0b10563e53fcfbaf Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 10 Nov 2025 17:13:48 +0100
Subject: [PATCH 1/6] Animate based on relative speed : power & max system
 power dynamic

---
 .../energyFlowChart/EnergyFlowChart.vue       | 53 +++++++++++++++++--
 .../energy-flow-chart-models.ts               |  2 +
 2 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index f5c402d523..3311d95c51 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -273,6 +273,41 @@ const chargePointSumPowerCategory = computed(() =>
   powerCategory(chargePointSumPower.value.value),
 );
 
+const allPowerValues = computed(() => {
+  const values = [
+    Math.abs(Number(gridPower.value.value)),
+    Math.abs(Number(homePower.value.value)),
+    Math.abs(Number(pvPower.value.value)),
+    Math.abs(Number(batteryPower.value.value)),
+    Math.abs(Number(chargePoint1Power.value.value)),
+    Math.abs(Number(chargePoint2Power.value.value)),
+    Math.abs(Number(chargePoint3Power.value.value)),
+    Math.abs(Number(chargePointSumPower.value.value)),
+  ];
+  return values.filter((v) => !isNaN(v) && v !== undefined && v !== null);
+});
+
+const maxCurrentPower = computed(() => {
+  const values = allPowerValues.value;
+  if (values.length === 0) return 1000;
+  return Math.max(...values, 1000);
+});
+
+const getAnimationDuration = (
+  power: number,
+  maxPower = maxCurrentPower.value,
+  minDuration = 0.4,
+  maxDuration = 4.0,
+) => {
+  const absPower = Math.abs(power);
+  console.log('Max Power for Animation Duration:', maxPower);
+  if (absPower >= maxPower) return `${minDuration}s`;
+  if (absPower <= 0) return `${maxDuration}s`;
+  const duration =
+    maxDuration - ((maxDuration - minDuration) * absPower) / maxPower;
+  return `${duration}s`;
+};
+
 ///////////////////////// Diagram components /////////////////////////
 
 const svgComponents = computed((): FlowComponent[] => {
@@ -293,6 +328,7 @@ const svgComponents = computed((): FlowComponent[] => {
     },
     position: { row: 0, column: 0 },
     label: ['EVU', absoluteValueObject(gridPower.value).textValue],
+    powerValue: Number(gridPower.value.value),
     icon: 'icons/owbGrid.svg',
   });
 
@@ -307,6 +343,7 @@ const svgComponents = computed((): FlowComponent[] => {
     },
     position: { row: 0, column: 2 },
     label: ['Haus', absoluteValueObject(homePower.value).textValue],
+    powerValue: Number(homePower.value.value),
     icon: 'icons/owbHouse.svg',
   });
 
@@ -322,6 +359,7 @@ const svgComponents = computed((): FlowComponent[] => {
       },
       position: { row: 1, column: 0 },
       label: ['PV', absoluteValueObject(pvPower.value).textValue],
+      powerValue: Number(pvPower.value.value),
       icon: 'icons/owbPV.svg',
     });
   }
@@ -338,6 +376,7 @@ const svgComponents = computed((): FlowComponent[] => {
       },
       position: { row: 1, column: 2 },
       label: ['Speicher', absoluteValueObject(batteryPower.value).textValue],
+      powerValue: Number(batteryPower.value.value),
       soc: batterySoc.value,
       icon: 'icons/owbBattery.svg',
     });
@@ -363,6 +402,7 @@ const svgComponents = computed((): FlowComponent[] => {
           chargePoint1Name.value,
           absoluteValueObject(chargePoint1Power.value).textValue,
         ],
+        powerValue: Number(chargePoint1Power.value.value),
         icon: 'icons/owbChargePoint.svg',
       });
 
@@ -410,6 +450,7 @@ const svgComponents = computed((): FlowComponent[] => {
             chargePoint2Name.value,
             absoluteValueObject(chargePoint2Power.value).textValue,
           ],
+          powerValue: Number(chargePoint2Power.value.value),
           icon: 'icons/owbChargePoint.svg',
         });
       }
@@ -455,6 +496,7 @@ const svgComponents = computed((): FlowComponent[] => {
             chargePoint3Name.value,
             absoluteValueObject(chargePoint3Power.value).textValue,
           ],
+          powerValue: Number(chargePoint3Power.value.value),
           icon: 'icons/owbChargePoint.svg',
         });
       }
@@ -499,6 +541,7 @@ const svgComponents = computed((): FlowComponent[] => {
           'Ladepunkte',
           absoluteValueObject(chargePointSumPower.value).textValue,
         ],
+        powerValue: Number(chargePointSumPower.value.value),
         icon: 'icons/owbChargePoint.svg',
       });
     }
@@ -596,8 +639,12 @@ const svgRectWidth = computed(
             component.class.base,
             { animated: component.class.animated },
             { animatedReverse: component.class.animatedReverse },
-            component.class.powerCategory,
           ]"
+          :style="{
+            '--animation-duration': getAnimationDuration(
+              component.powerValue || 0,
+            ),
+          }"
           :d="
             component.class.base !== 'vehicle'
               ? `M ${calcFlowLineAnchorX(component.position.column)}, ` +
@@ -772,13 +819,13 @@ path {
 path.animated {
   stroke: var(--q-white);
   stroke-dasharray: 5;
-  animation: dash 3.5s linear infinite;
+  animation: dash var(--animation-duration, 1.5s) linear infinite;
 }
 
 path.animatedReverse {
   stroke: var(--q-white);
   stroke-dasharray: 5;
-  animation: dashReverse 3.5s linear infinite;
+  animation: dashReverse var(--animation-duration, 1.5s) linear infinite;
 }
 
 path.medium.animated,
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
index d8b1dab41c..9342c9a7da 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
@@ -28,6 +28,8 @@ export interface FlowComponent {
   class: ComponentClass;
   position: ComponentPosition;
   label: string[];
+  powerValue?: number;
   soc?: number;
   icon: string;
 }
+

From fb491a5a3fad301061a7503d07c064c50b4d2d64 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 11 Nov 2025 10:42:19 +0100
Subject: [PATCH 2/6] Animation carried out in script section to avoid
 "animation skipping"

---
 .../energyFlowChart/EnergyFlowChart.vue       | 174 +++++++++---------
 1 file changed, 82 insertions(+), 92 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 3311d95c51..5f80b83e54 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useMqttStore } from 'src/stores/mqtt-store';
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
 import type { SvgSize, FlowComponent } from './energy-flow-chart-models';
 import type { ValueObject } from 'src/stores/mqtt-store-model';
 
@@ -248,33 +248,8 @@ const chargePointSumCharging = computed(
 
 ///////////////////// Set animation speed //////////////////////////
 
-const powerCategory = (power: number) => {
-  if (Math.abs(power) >= 5000) return 'large';
-  if (Math.abs(power) >= 1500) return 'medium';
-  return 'small';
-};
-
-const pvPowerCategory = computed(() => powerCategory(pvPower.value.value));
-const batteryPowerCategory = computed(() =>
-  powerCategory(batteryPower.value.value),
-);
-const gridPowerCategory = computed(() => powerCategory(gridPower.value.value));
-const homePowerCategory = computed(() => powerCategory(homePower.value.value));
-const chargePoint1PowerCategory = computed(() =>
-  powerCategory(chargePoint1Power.value.value),
-);
-const chargePoint2PowerCategory = computed(() =>
-  powerCategory(chargePoint2Power.value.value),
-);
-const chargePoint3PowerCategory = computed(() =>
-  powerCategory(chargePoint3Power.value.value),
-);
-const chargePointSumPowerCategory = computed(() =>
-  powerCategory(chargePointSumPower.value.value),
-);
-
-const allPowerValues = computed(() => {
-  const values = [
+const maxSystemPower = computed(() => {
+  const powerValues = [
     Math.abs(Number(gridPower.value.value)),
     Math.abs(Number(homePower.value.value)),
     Math.abs(Number(pvPower.value.value)),
@@ -282,30 +257,64 @@ const allPowerValues = computed(() => {
     Math.abs(Number(chargePoint1Power.value.value)),
     Math.abs(Number(chargePoint2Power.value.value)),
     Math.abs(Number(chargePoint3Power.value.value)),
-    Math.abs(Number(chargePointSumPower.value.value)),
+    // Only take the sum into account if there are more than 3 charging points
+    ...(connectedChargePoints.value.length > 3
+      ? [Math.abs(Number(chargePointSumPower.value.value))]
+      : []),
   ];
-  return values.filter((v) => !isNaN(v) && v !== undefined && v !== null);
-});
-
-const maxCurrentPower = computed(() => {
-  const values = allPowerValues.value;
-  if (values.length === 0) return 1000;
-  return Math.max(...values, 1000);
+  const filteredPowerValues = powerValues.filter(
+    (value) => !isNaN(value) && value !== undefined && value !== null,
+  );
+  if (filteredPowerValues.length === 0) return 1000;
+  return Math.max(...filteredPowerValues);
 });
 
-const getAnimationDuration = (
+const calcDashSpeed = (
   power: number,
-  maxPower = maxCurrentPower.value,
-  minDuration = 0.4,
-  maxDuration = 4.0,
+  maxPower = maxSystemPower.value,
+  minSpeed = 1,
+  maxSpeed = 7,
 ) => {
   const absPower = Math.abs(power);
-  console.log('Max Power for Animation Duration:', maxPower);
-  if (absPower >= maxPower) return `${minDuration}s`;
-  if (absPower <= 0) return `${maxDuration}s`;
-  const duration =
-    maxDuration - ((maxDuration - minDuration) * absPower) / maxPower;
-  return `${duration}s`;
+  if (absPower <= 0) return minSpeed;
+  if (absPower >= maxPower) return maxSpeed;
+  return minSpeed + (maxSpeed - minSpeed) * (absPower / maxPower);
+};
+
+let animationFrameId: number | null = null;
+const dashOffsets = ref<Record<string, number>>({});
+
+// Animation-Loop
+const animateDashes = () => {
+  const frameDuration = 1 / 30; // time per Frame (30 FPS)
+  function step() {
+    svgComponents.value.forEach((component) => {
+      if (component.class.animated || component.class.animatedReverse) {
+        const id = component.id;
+        const path = document.getElementById(`flow-path-${id}`);
+        const dashLength = 10;
+        const speed = calcDashSpeed(component.powerValue || 0);
+        // Update the dash offset
+        const previousOffset = dashOffsets.value[id] ?? 0;
+        // +1 = reverse direction, -1 = normal direction
+        const directionMultiplier = component.class.animatedReverse ? 1 : -1;
+        // How far the dash pattern moves during this frame.. speed: units per second, delta: time elapsed since the last frame (in seconds)
+        const offsetChange = speed * frameDuration * directionMultiplier;
+        // Raw new offset (can be larger than dashLength or smaller than 0)
+        let newOffset = (previousOffset + offsetChange) % dashLength;
+        // In JavaScript, the % operator can return a negative result so if it's negative, shift it back into the [0, dashLength) range
+        if (newOffset < 0) {
+          newOffset += dashLength;
+        }
+        // Store the calculated offset for this path
+        dashOffsets.value[id] = newOffset;
+        // Apply the new offset to the SVG path
+        path.style.strokeDashoffset = `${newOffset}`;
+      }
+    });
+    animationFrameId = requestAnimationFrame(step);
+  }
+  animationFrameId = requestAnimationFrame(step);
 };
 
 ///////////////////////// Diagram components /////////////////////////
@@ -324,7 +333,6 @@ const svgComponents = computed((): FlowComponent[] => {
           : '',
       animated: gridConsumption.value,
       animatedReverse: gridFeedIn.value,
-      powerCategory: gridPowerCategory.value,
     },
     position: { row: 0, column: 0 },
     label: ['EVU', absoluteValueObject(gridPower.value).textValue],
@@ -339,7 +347,6 @@ const svgComponents = computed((): FlowComponent[] => {
       valueLabel: '',
       animated: homeProduction.value,
       animatedReverse: homeConsumption.value,
-      powerCategory: homePowerCategory.value,
     },
     position: { row: 0, column: 2 },
     label: ['Haus', absoluteValueObject(homePower.value).textValue],
@@ -355,7 +362,6 @@ const svgComponents = computed((): FlowComponent[] => {
         valueLabel: 'fill-success',
         animated: pvProduction.value,
         animatedReverse: pvConsumption.value,
-        powerCategory: pvPowerCategory.value,
       },
       position: { row: 1, column: 0 },
       label: ['PV', absoluteValueObject(pvPower.value).textValue],
@@ -372,7 +378,6 @@ const svgComponents = computed((): FlowComponent[] => {
         valueLabel: '',
         animated: batteryDischarging.value,
         animatedReverse: batteryCharging.value,
-        powerCategory: batteryPowerCategory.value,
       },
       position: { row: 1, column: 2 },
       label: ['Speicher', absoluteValueObject(batteryPower.value).textValue],
@@ -392,7 +397,6 @@ const svgComponents = computed((): FlowComponent[] => {
           valueLabel: '',
           animated: chargePoint1Discharging.value,
           animatedReverse: chargePoint1Charging.value,
-          powerCategory: chargePoint1PowerCategory.value,
         },
         position: {
           row: 2,
@@ -416,7 +420,6 @@ const svgComponents = computed((): FlowComponent[] => {
               'fill-' + chargePoint1ConnectedVehicleChargeMode.value.class,
             animated: chargePoint1Discharging.value,
             animatedReverse: chargePoint1Charging.value,
-            powerCategory: chargePoint1PowerCategory.value,
           },
           position: {
             row: 3,
@@ -428,6 +431,7 @@ const svgComponents = computed((): FlowComponent[] => {
           ],
           soc: (chargePoint1ConnectedVehicleSoc.value.value?.soc || 0) / 100,
           icon: 'icons/owbVehicle.svg',
+          powerValue: Number(chargePoint1Power.value.value),
         });
       }
 
@@ -440,7 +444,6 @@ const svgComponents = computed((): FlowComponent[] => {
             valueLabel: '',
             animated: chargePoint2Discharging.value,
             animatedReverse: chargePoint2Charging.value,
-            powerCategory: chargePoint2PowerCategory.value,
           },
           position: {
             row: 2,
@@ -465,7 +468,6 @@ const svgComponents = computed((): FlowComponent[] => {
               'fill-' + chargePoint2ConnectedVehicleChargeMode.value.class,
             animated: chargePoint2Discharging.value,
             animatedReverse: chargePoint2Charging.value,
-            powerCategory: chargePoint2PowerCategory.value,
           },
           position: {
             row: 3,
@@ -477,6 +479,7 @@ const svgComponents = computed((): FlowComponent[] => {
           ],
           soc: (chargePoint2ConnectedVehicleSoc.value.value?.soc || 0) / 100,
           icon: 'icons/owbVehicle.svg',
+          powerValue: Number(chargePoint2Power.value.value),
         });
       }
 
@@ -489,7 +492,6 @@ const svgComponents = computed((): FlowComponent[] => {
             valueLabel: '',
             animated: chargePoint3Discharging.value,
             animatedReverse: chargePoint3Charging.value,
-            powerCategory: chargePoint3PowerCategory.value,
           },
           position: { row: 2, column: 2 },
           label: [
@@ -511,7 +513,6 @@ const svgComponents = computed((): FlowComponent[] => {
               'fill-' + chargePoint3ConnectedVehicleChargeMode.value.class,
             animated: chargePoint3Discharging.value,
             animatedReverse: chargePoint3Charging.value,
-            powerCategory: chargePoint3PowerCategory.value,
           },
           position: {
             row: 3,
@@ -523,6 +524,7 @@ const svgComponents = computed((): FlowComponent[] => {
           ],
           soc: (chargePoint3ConnectedVehicleSoc.value.value?.soc || 0) / 100,
           icon: 'icons/owbVehicle.svg',
+          powerValue: Number(chargePoint3Power.value.value),
         });
       }
     } else {
@@ -534,7 +536,6 @@ const svgComponents = computed((): FlowComponent[] => {
           valueLabel: '',
           animated: chargePointSumDischarging.value,
           animatedReverse: chargePointSumCharging.value,
-          powerCategory: chargePointSumPowerCategory.value,
         },
         position: { row: 2, column: 1 },
         label: [
@@ -549,6 +550,29 @@ const svgComponents = computed((): FlowComponent[] => {
   return components;
 });
 
+onMounted(() => {
+  animateDashes();
+});
+
+onUnmounted(() => {
+  if (animationFrameId !== null) {
+    cancelAnimationFrame(animationFrameId);
+    animationFrameId = null;
+  }
+});
+
+watch(
+  svgComponents,
+  (components) => {
+    components.forEach((component) => {
+      if (!(component.id in dashOffsets.value)) {
+        dashOffsets.value[component.id] = 0;
+      }
+    });
+  },
+  { immediate: true, deep: true },
+);
+
 const calculatedRows = computed(() => {
   if (connectedChargePoints.value?.length > 0) {
     return connectedChargePoints.value.length > 3 ? 3 : 4;
@@ -635,16 +659,12 @@ const svgRectWidth = computed(
         <path
           v-for="component in svgComponents"
           :key="component.id"
+          :id="`flow-path-${component.id}`"
           :class="[
             component.class.base,
             { animated: component.class.animated },
             { animatedReverse: component.class.animatedReverse },
           ]"
-          :style="{
-            '--animation-duration': getAnimationDuration(
-              component.powerValue || 0,
-            ),
-          }"
           :d="
             component.class.base !== 'vehicle'
               ? `M ${calcFlowLineAnchorX(component.position.column)}, ` +
@@ -819,41 +839,11 @@ path {
 path.animated {
   stroke: var(--q-white);
   stroke-dasharray: 5;
-  animation: dash var(--animation-duration, 1.5s) linear infinite;
 }
 
 path.animatedReverse {
   stroke: var(--q-white);
   stroke-dasharray: 5;
-  animation: dashReverse var(--animation-duration, 1.5s) linear infinite;
-}
-
-path.medium.animated,
-path.medium.animatedReverse {
-  animation-duration: 1.5s;
-}
-
-path.large.animated,
-path.large.animatedReverse {
-  animation-duration: 0.6s;
-}
-
-@keyframes dash {
-  from {
-    stroke-dashoffset: 10;
-  }
-  to {
-    stroke-dashoffset: 0;
-  }
-}
-
-@keyframes dashReverse {
-  from {
-    stroke-dashoffset: 0;
-  }
-  to {
-    stroke-dashoffset: 10;
-  }
 }
 
 path.animated.grid {

From 08e289bde5974c37f5e2789596a2dd976153f483 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 19 Nov 2025 09:00:28 +0100
Subject: [PATCH 3/6] Fix-option A - CSS-class per component - dynamic with
 v-bind

---
 .../energyFlowChart/EnergyFlowChart.vue       | 209 ++++++++++--------
 .../energy-flow-chart-models.ts               |   1 +
 2 files changed, 122 insertions(+), 88 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 5f80b83e54..c3f0dc85f4 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useMqttStore } from 'src/stores/mqtt-store';
-import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
+import { ref, computed, watch } from 'vue';
 import type { SvgSize, FlowComponent } from './energy-flow-chart-models';
 import type { ValueObject } from 'src/stores/mqtt-store-model';
 
@@ -269,53 +269,44 @@ const maxSystemPower = computed(() => {
   return Math.max(...filteredPowerValues);
 });
 
-const calcDashSpeed = (
-  power: number,
-  maxPower = maxSystemPower.value,
-  minSpeed = 1,
-  maxSpeed = 7,
-) => {
-  const absPower = Math.abs(power);
-  if (absPower <= 0) return minSpeed;
-  if (absPower >= maxPower) return maxSpeed;
-  return minSpeed + (maxSpeed - minSpeed) * (absPower / maxPower);
-};
+function calcDuration(power: number, maxPower: number) {
+  const minDuration = 0.4;
+  const maxDuration = 4.0;
+  const absPower = Math.abs(power || 0);
+  if (absPower >= maxPower) return `${minDuration}s`;
+  if (absPower > 0)
+    return `${maxDuration - (maxDuration - minDuration) * (absPower / maxPower)}s`;
+  return `${maxDuration}s`;
+}
 
-let animationFrameId: number | null = null;
-const dashOffsets = ref<Record<string, number>>({});
-
-// Animation-Loop
-const animateDashes = () => {
-  const frameDuration = 1 / 30; // time per Frame (30 FPS)
-  function step() {
-    svgComponents.value.forEach((component) => {
-      if (component.class.animated || component.class.animatedReverse) {
-        const id = component.id;
-        const path = document.getElementById(`flow-path-${id}`);
-        const dashLength = 10;
-        const speed = calcDashSpeed(component.powerValue || 0);
-        // Update the dash offset
-        const previousOffset = dashOffsets.value[id] ?? 0;
-        // +1 = reverse direction, -1 = normal direction
-        const directionMultiplier = component.class.animatedReverse ? 1 : -1;
-        // How far the dash pattern moves during this frame.. speed: units per second, delta: time elapsed since the last frame (in seconds)
-        const offsetChange = speed * frameDuration * directionMultiplier;
-        // Raw new offset (can be larger than dashLength or smaller than 0)
-        let newOffset = (previousOffset + offsetChange) % dashLength;
-        // In JavaScript, the % operator can return a negative result so if it's negative, shift it back into the [0, dashLength) range
-        if (newOffset < 0) {
-          newOffset += dashLength;
-        }
-        // Store the calculated offset for this path
-        dashOffsets.value[id] = newOffset;
-        // Apply the new offset to the SVG path
-        path.style.strokeDashoffset = `${newOffset}`;
-      }
-    });
-    animationFrameId = requestAnimationFrame(step);
-  }
-  animationFrameId = requestAnimationFrame(step);
-};
+const animationDurations = computed(() => {
+  const maxPower = maxSystemPower.value;
+  return {
+    grid: calcDuration(Number(gridPower.value.value), maxPower),
+    home: calcDuration(Number(homePower.value.value), maxPower),
+    pv: calcDuration(Number(pvPower.value.value), maxPower),
+    battery: calcDuration(Number(batteryPower.value.value), maxPower),
+    chargePoint1: calcDuration(
+      Number(chargePoint1Power.value.value),
+      maxPower,
+    ),
+    chargePoint2: calcDuration(
+      Number(chargePoint2Power.value.value),
+      maxPower,
+    ),
+    chargePoint3: calcDuration(
+      Number(chargePoint3Power.value.value),
+      maxPower,
+    ),
+    chargePointSum: calcDuration(
+      Number(chargePointSumPower.value.value),
+      maxPower,
+    ),
+    vehicle1: calcDuration(Number(chargePoint1Power.value.value), maxPower),
+    vehicle2: calcDuration(Number(chargePoint2Power.value.value), maxPower),
+    vehicle3: calcDuration(Number(chargePoint3Power.value.value), maxPower),
+  };
+});
 
 ///////////////////////// Diagram components /////////////////////////
 
@@ -394,6 +385,7 @@ const svgComponents = computed((): FlowComponent[] => {
         id: 'charge-point-1',
         class: {
           base: 'charge-point',
+          animationId: 'charge-point-1',
           valueLabel: '',
           animated: chargePoint1Discharging.value,
           animatedReverse: chargePoint1Charging.value,
@@ -416,6 +408,7 @@ const svgComponents = computed((): FlowComponent[] => {
           id: 'vehicle-1',
           class: {
             base: 'vehicle',
+            animationId: 'vehicle-1',
             valueLabel:
               'fill-' + chargePoint1ConnectedVehicleChargeMode.value.class,
             animated: chargePoint1Discharging.value,
@@ -441,6 +434,7 @@ const svgComponents = computed((): FlowComponent[] => {
           id: 'charge-point-2',
           class: {
             base: 'charge-point',
+            animationId: 'charge-point-2',
             valueLabel: '',
             animated: chargePoint2Discharging.value,
             animatedReverse: chargePoint2Charging.value,
@@ -464,6 +458,7 @@ const svgComponents = computed((): FlowComponent[] => {
           id: 'vehicle-2',
           class: {
             base: 'vehicle',
+            animationId: 'vehicle-2',
             valueLabel:
               'fill-' + chargePoint2ConnectedVehicleChargeMode.value.class,
             animated: chargePoint2Discharging.value,
@@ -489,6 +484,7 @@ const svgComponents = computed((): FlowComponent[] => {
           id: 'charge-point-3',
           class: {
             base: 'charge-point',
+            animationId: 'charge-point-3',
             valueLabel: '',
             animated: chargePoint3Discharging.value,
             animatedReverse: chargePoint3Charging.value,
@@ -509,6 +505,7 @@ const svgComponents = computed((): FlowComponent[] => {
           id: 'vehicle-3',
           class: {
             base: 'vehicle',
+            animationId: 'vehicle-3',
             valueLabel:
               'fill-' + chargePoint3ConnectedVehicleChargeMode.value.class,
             animated: chargePoint3Discharging.value,
@@ -533,6 +530,7 @@ const svgComponents = computed((): FlowComponent[] => {
         id: 'charge-point-sum',
         class: {
           base: 'charge-point',
+          animationId: 'charge-point-sum',
           valueLabel: '',
           animated: chargePointSumDischarging.value,
           animatedReverse: chargePointSumCharging.value,
@@ -550,29 +548,6 @@ const svgComponents = computed((): FlowComponent[] => {
   return components;
 });
 
-onMounted(() => {
-  animateDashes();
-});
-
-onUnmounted(() => {
-  if (animationFrameId !== null) {
-    cancelAnimationFrame(animationFrameId);
-    animationFrameId = null;
-  }
-});
-
-watch(
-  svgComponents,
-  (components) => {
-    components.forEach((component) => {
-      if (!(component.id in dashOffsets.value)) {
-        dashOffsets.value[component.id] = 0;
-      }
-    });
-  },
-  { immediate: true, deep: true },
-);
-
 const calculatedRows = computed(() => {
   if (connectedChargePoints.value?.length > 0) {
     return connectedChargePoints.value.length > 3 ? 3 : 4;
@@ -662,6 +637,7 @@ const svgRectWidth = computed(
           :id="`flow-path-${component.id}`"
           :class="[
             component.class.base,
+            component.class.animationId,
             { animated: component.class.animated },
             { animatedReverse: component.class.animatedReverse },
           ]"
@@ -836,54 +812,111 @@ path {
   transition: stroke 0.5s;
 }
 
+/* Basis for all animated lines */
 path.animated {
-  stroke: var(--q-white);
+  animation-name: dash;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
   stroke-dasharray: 5;
 }
-
 path.animatedReverse {
-  stroke: var(--q-white);
+  animation-name: dashReverse;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
   stroke-dasharray: 5;
 }
 
 path.animated.grid {
   stroke: var(--q-negative);
+  animation-duration: v-bind('animationDurations.grid');
 }
-
 path.animatedReverse.grid {
   stroke: var(--q-positive);
+  animation-duration: v-bind('animationDurations.grid');
 }
 
-:root {
-  path.home {
-    stroke: var(--q-grey);
-  }
-}
-
-.body--dark {
-  path.home {
-    stroke: var(--q-white);
-  }
+path.animated.home,
+path.animatedReverse.home {
+  stroke: var(--q-flow-home-stroke);
+  animation-duration: v-bind('animationDurations.home');
 }
 
 path.animated.pv,
 path.animatedReverse.pv {
   stroke: var(--q-positive);
+  animation-duration: v-bind('animationDurations.pv');
 }
 
 path.animated.battery,
 path.animatedReverse.battery {
   stroke: var(--q-warning);
+  animation-duration: v-bind('animationDurations.battery');
 }
 
-path.animated.charge-point,
-path.animatedReverse.charge-point {
+path.animated.charge-point-1,
+path.animatedReverse.charge-point-1 {
+  stroke: var(--q-primary);
+  animation-duration: v-bind('animationDurations.chargePoint1');
+}
+path.animated.charge-point-2,
+path.animatedReverse.charge-point-2 {
+  stroke: var(--q-primary);
+  animation-duration: v-bind('animationDurations.chargePoint2');
+}
+path.animated.charge-point-3,
+path.animatedReverse.charge-point-3 {
+  stroke: var(--q-primary);
+  animation-duration: v-bind('animationDurations.chargePoint3');
+}
+path.animated.charge-point-sum,
+path.animatedReverse.charge-point-sum {
   stroke: var(--q-primary);
+  animation-duration: v-bind('animationDurations.chargePointSum');
 }
 
-path.animated.vehicle,
-path.animatedReverse.vehicle {
+path.animated.vehicle-1,
+path.animatedReverse.vehicle-1 {
   stroke: var(--q-accent);
+  animation-duration: v-bind('animationDurations.vehicle1');
+}
+path.animated.vehicle-2,
+path.animatedReverse.vehicle-2 {
+  stroke: var(--q-accent);
+  animation-duration: v-bind('animationDurations.vehicle2');
+}
+path.animated.vehicle-3,
+path.animatedReverse.vehicle-3 {
+  stroke: var(--q-accent);
+  animation-duration: v-bind('animationDurations.vehicle3');
+}
+
+@keyframes dash {
+  from {
+    stroke-dashoffset: 10;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes dashReverse {
+  from {
+    stroke-dashoffset: 0;
+  }
+  to {
+    stroke-dashoffset: 10;
+  }
+}
+
+:root {
+  path.home {
+    stroke: var(--q-grey);
+  }
+}
+
+.body--dark {
+  path.home {
+    stroke: var(--q-white);
+  }
 }
 
 circle {
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
index 9342c9a7da..0f0a893c11 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
@@ -12,6 +12,7 @@ export interface SvgSize {
 
 export interface ComponentClass {
   base: string;
+  animationId?: string;
   valueLabel: string;
   animated?: boolean;
   animatedReverse?: boolean;

From bc01e500cba7a3673d1ab979545f45a59e3c2eaa Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 19 Nov 2025 09:14:32 +0100
Subject: [PATCH 4/6] Fix-option B animation in Javascript loop - 2 frames per
 second

---
 .../energyFlowChart/EnergyFlowChart.vue       | 209 ++++++++----------
 1 file changed, 88 insertions(+), 121 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index c3f0dc85f4..80a8c08bba 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useMqttStore } from 'src/stores/mqtt-store';
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
 import type { SvgSize, FlowComponent } from './energy-flow-chart-models';
 import type { ValueObject } from 'src/stores/mqtt-store-model';
 
@@ -269,44 +269,53 @@ const maxSystemPower = computed(() => {
   return Math.max(...filteredPowerValues);
 });
 
-function calcDuration(power: number, maxPower: number) {
-  const minDuration = 0.4;
-  const maxDuration = 4.0;
-  const absPower = Math.abs(power || 0);
-  if (absPower >= maxPower) return `${minDuration}s`;
-  if (absPower > 0)
-    return `${maxDuration - (maxDuration - minDuration) * (absPower / maxPower)}s`;
-  return `${maxDuration}s`;
-}
+const calcDashSpeed = (
+  power: number,
+  maxPower = maxSystemPower.value,
+  minSpeed = 0.04,
+  maxSpeed = 0.5,
+) => {
+  const absPower = Math.abs(power);
+  if (absPower <= 0) return minSpeed;
+  if (absPower >= maxPower) return maxSpeed;
+  return minSpeed + (maxSpeed - minSpeed) * (absPower / maxPower);
+};
 
-const animationDurations = computed(() => {
-  const maxPower = maxSystemPower.value;
-  return {
-    grid: calcDuration(Number(gridPower.value.value), maxPower),
-    home: calcDuration(Number(homePower.value.value), maxPower),
-    pv: calcDuration(Number(pvPower.value.value), maxPower),
-    battery: calcDuration(Number(batteryPower.value.value), maxPower),
-    chargePoint1: calcDuration(
-      Number(chargePoint1Power.value.value),
-      maxPower,
-    ),
-    chargePoint2: calcDuration(
-      Number(chargePoint2Power.value.value),
-      maxPower,
-    ),
-    chargePoint3: calcDuration(
-      Number(chargePoint3Power.value.value),
-      maxPower,
-    ),
-    chargePointSum: calcDuration(
-      Number(chargePointSumPower.value.value),
-      maxPower,
-    ),
-    vehicle1: calcDuration(Number(chargePoint1Power.value.value), maxPower),
-    vehicle2: calcDuration(Number(chargePoint2Power.value.value), maxPower),
-    vehicle3: calcDuration(Number(chargePoint3Power.value.value), maxPower),
-  };
-});
+let animationFrameId: number | null = null;
+const dashOffsets = ref<Record<string, number>>({});
+
+// Animation-Loop
+const animateDashes = () => {
+  const frameDuration = 1 / 2; // time per Frame (2 FPS)
+  function step() {
+    svgComponents.value.forEach((component) => {
+      if (component.class.animated || component.class.animatedReverse) {
+        const id = component.id;
+        const path = document.getElementById(`flow-path-${id}`);
+        const dashLength = 10;
+        const speed = calcDashSpeed(component.powerValue || 0);
+        // Update the dash offset
+        const previousOffset = dashOffsets.value[id] ?? 0;
+        // +1 = reverse direction, -1 = normal direction
+        const directionMultiplier = component.class.animatedReverse ? 1 : -1;
+        // How far the dash pattern moves during this frame.. speed: units per second, delta: time elapsed since the last frame (in seconds)
+        const offsetChange = speed * frameDuration * directionMultiplier;
+        // Raw new offset (can be larger than dashLength or smaller than 0)
+        let newOffset = (previousOffset + offsetChange) % dashLength;
+        // In JavaScript, the % operator can return a negative result so if it's negative, shift it back into the [0, dashLength) range
+        if (newOffset < 0) {
+          newOffset += dashLength;
+        }
+        // Store the calculated offset for this path
+        dashOffsets.value[id] = newOffset;
+        // Apply the new offset to the SVG path
+        path.style.strokeDashoffset = `${newOffset}`;
+      }
+    });
+    animationFrameId = requestAnimationFrame(step);
+  }
+  animationFrameId = requestAnimationFrame(step);
+};
 
 ///////////////////////// Diagram components /////////////////////////
 
@@ -385,7 +394,6 @@ const svgComponents = computed((): FlowComponent[] => {
         id: 'charge-point-1',
         class: {
           base: 'charge-point',
-          animationId: 'charge-point-1',
           valueLabel: '',
           animated: chargePoint1Discharging.value,
           animatedReverse: chargePoint1Charging.value,
@@ -408,7 +416,6 @@ const svgComponents = computed((): FlowComponent[] => {
           id: 'vehicle-1',
           class: {
             base: 'vehicle',
-            animationId: 'vehicle-1',
             valueLabel:
               'fill-' + chargePoint1ConnectedVehicleChargeMode.value.class,
             animated: chargePoint1Discharging.value,
@@ -434,7 +441,6 @@ const svgComponents = computed((): FlowComponent[] => {
           id: 'charge-point-2',
           class: {
             base: 'charge-point',
-            animationId: 'charge-point-2',
             valueLabel: '',
             animated: chargePoint2Discharging.value,
             animatedReverse: chargePoint2Charging.value,
@@ -458,7 +464,6 @@ const svgComponents = computed((): FlowComponent[] => {
           id: 'vehicle-2',
           class: {
             base: 'vehicle',
-            animationId: 'vehicle-2',
             valueLabel:
               'fill-' + chargePoint2ConnectedVehicleChargeMode.value.class,
             animated: chargePoint2Discharging.value,
@@ -484,7 +489,6 @@ const svgComponents = computed((): FlowComponent[] => {
           id: 'charge-point-3',
           class: {
             base: 'charge-point',
-            animationId: 'charge-point-3',
             valueLabel: '',
             animated: chargePoint3Discharging.value,
             animatedReverse: chargePoint3Charging.value,
@@ -505,7 +509,6 @@ const svgComponents = computed((): FlowComponent[] => {
           id: 'vehicle-3',
           class: {
             base: 'vehicle',
-            animationId: 'vehicle-3',
             valueLabel:
               'fill-' + chargePoint3ConnectedVehicleChargeMode.value.class,
             animated: chargePoint3Discharging.value,
@@ -530,7 +533,6 @@ const svgComponents = computed((): FlowComponent[] => {
         id: 'charge-point-sum',
         class: {
           base: 'charge-point',
-          animationId: 'charge-point-sum',
           valueLabel: '',
           animated: chargePointSumDischarging.value,
           animatedReverse: chargePointSumCharging.value,
@@ -548,6 +550,29 @@ const svgComponents = computed((): FlowComponent[] => {
   return components;
 });
 
+onMounted(() => {
+  animateDashes();
+});
+
+onUnmounted(() => {
+  if (animationFrameId !== null) {
+    cancelAnimationFrame(animationFrameId);
+    animationFrameId = null;
+  }
+});
+
+watch(
+  svgComponents,
+  (components) => {
+    components.forEach((component) => {
+      if (!(component.id in dashOffsets.value)) {
+        dashOffsets.value[component.id] = 0;
+      }
+    });
+  },
+  { immediate: true, deep: true },
+);
+
 const calculatedRows = computed(() => {
   if (connectedChargePoints.value?.length > 0) {
     return connectedChargePoints.value.length > 3 ? 3 : 4;
@@ -637,7 +662,6 @@ const svgRectWidth = computed(
           :id="`flow-path-${component.id}`"
           :class="[
             component.class.base,
-            component.class.animationId,
             { animated: component.class.animated },
             { animatedReverse: component.class.animatedReverse },
           ]"
@@ -812,111 +836,54 @@ path {
   transition: stroke 0.5s;
 }
 
-/* Basis for all animated lines */
 path.animated {
-  animation-name: dash;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
+  stroke: var(--q-white);
   stroke-dasharray: 5;
 }
+
 path.animatedReverse {
-  animation-name: dashReverse;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
+  stroke: var(--q-white);
   stroke-dasharray: 5;
 }
 
 path.animated.grid {
   stroke: var(--q-negative);
-  animation-duration: v-bind('animationDurations.grid');
 }
+
 path.animatedReverse.grid {
   stroke: var(--q-positive);
-  animation-duration: v-bind('animationDurations.grid');
 }
 
-path.animated.home,
-path.animatedReverse.home {
-  stroke: var(--q-flow-home-stroke);
-  animation-duration: v-bind('animationDurations.home');
+:root {
+  path.home {
+    stroke: var(--q-grey);
+  }
+}
+
+.body--dark {
+  path.home {
+    stroke: var(--q-white);
+  }
 }
 
 path.animated.pv,
 path.animatedReverse.pv {
   stroke: var(--q-positive);
-  animation-duration: v-bind('animationDurations.pv');
 }
 
 path.animated.battery,
 path.animatedReverse.battery {
   stroke: var(--q-warning);
-  animation-duration: v-bind('animationDurations.battery');
 }
 
-path.animated.charge-point-1,
-path.animatedReverse.charge-point-1 {
-  stroke: var(--q-primary);
-  animation-duration: v-bind('animationDurations.chargePoint1');
-}
-path.animated.charge-point-2,
-path.animatedReverse.charge-point-2 {
-  stroke: var(--q-primary);
-  animation-duration: v-bind('animationDurations.chargePoint2');
-}
-path.animated.charge-point-3,
-path.animatedReverse.charge-point-3 {
-  stroke: var(--q-primary);
-  animation-duration: v-bind('animationDurations.chargePoint3');
-}
-path.animated.charge-point-sum,
-path.animatedReverse.charge-point-sum {
+path.animated.charge-point,
+path.animatedReverse.charge-point {
   stroke: var(--q-primary);
-  animation-duration: v-bind('animationDurations.chargePointSum');
 }
 
-path.animated.vehicle-1,
-path.animatedReverse.vehicle-1 {
+path.animated.vehicle,
+path.animatedReverse.vehicle {
   stroke: var(--q-accent);
-  animation-duration: v-bind('animationDurations.vehicle1');
-}
-path.animated.vehicle-2,
-path.animatedReverse.vehicle-2 {
-  stroke: var(--q-accent);
-  animation-duration: v-bind('animationDurations.vehicle2');
-}
-path.animated.vehicle-3,
-path.animatedReverse.vehicle-3 {
-  stroke: var(--q-accent);
-  animation-duration: v-bind('animationDurations.vehicle3');
-}
-
-@keyframes dash {
-  from {
-    stroke-dashoffset: 10;
-  }
-  to {
-    stroke-dashoffset: 0;
-  }
-}
-@keyframes dashReverse {
-  from {
-    stroke-dashoffset: 0;
-  }
-  to {
-    stroke-dashoffset: 10;
-  }
-}
-
-:root {
-  path.home {
-    stroke: var(--q-grey);
-  }
-}
-
-.body--dark {
-  path.home {
-    stroke: var(--q-white);
-  }
 }
 
 circle {

From 72dfa01bfb8907913ed2291f770256aaf187b072 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 19 Nov 2025 11:45:21 +0100
Subject: [PATCH 5/6] Fix-option C Dynamically chained CSS Transitions

---
 .../energyFlowChart/EnergyFlowChart.vue       | 173 +++++++++---------
 .../composables/useEnergyFlowTransition.ts    | 144 +++++++++++++++
 2 files changed, 235 insertions(+), 82 deletions(-)
 create mode 100644 packages/modules/web_themes/koala/source/src/composables/useEnergyFlowTransition.ts

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 80a8c08bba..c44f853cda 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { useMqttStore } from 'src/stores/mqtt-store';
-import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
+import { ref, computed, watch } from 'vue';
 import type { SvgSize, FlowComponent } from './energy-flow-chart-models';
 import type { ValueObject } from 'src/stores/mqtt-store-model';
+import { useEnergyFlowTransition } from 'src/composables/useEnergyFlowTransition';
 
 const mqttStore = useMqttStore();
 
@@ -269,53 +270,53 @@ const maxSystemPower = computed(() => {
   return Math.max(...filteredPowerValues);
 });
 
-const calcDashSpeed = (
-  power: number,
-  maxPower = maxSystemPower.value,
-  minSpeed = 0.04,
-  maxSpeed = 0.5,
-) => {
-  const absPower = Math.abs(power);
-  if (absPower <= 0) return minSpeed;
-  if (absPower >= maxPower) return maxSpeed;
-  return minSpeed + (maxSpeed - minSpeed) * (absPower / maxPower);
-};
-
-let animationFrameId: number | null = null;
-const dashOffsets = ref<Record<string, number>>({});
-
-// Animation-Loop
-const animateDashes = () => {
-  const frameDuration = 1 / 2; // time per Frame (2 FPS)
-  function step() {
-    svgComponents.value.forEach((component) => {
-      if (component.class.animated || component.class.animatedReverse) {
-        const id = component.id;
-        const path = document.getElementById(`flow-path-${id}`);
-        const dashLength = 10;
-        const speed = calcDashSpeed(component.powerValue || 0);
-        // Update the dash offset
-        const previousOffset = dashOffsets.value[id] ?? 0;
-        // +1 = reverse direction, -1 = normal direction
-        const directionMultiplier = component.class.animatedReverse ? 1 : -1;
-        // How far the dash pattern moves during this frame.. speed: units per second, delta: time elapsed since the last frame (in seconds)
-        const offsetChange = speed * frameDuration * directionMultiplier;
-        // Raw new offset (can be larger than dashLength or smaller than 0)
-        let newOffset = (previousOffset + offsetChange) % dashLength;
-        // In JavaScript, the % operator can return a negative result so if it's negative, shift it back into the [0, dashLength) range
-        if (newOffset < 0) {
-          newOffset += dashLength;
-        }
-        // Store the calculated offset for this path
-        dashOffsets.value[id] = newOffset;
-        // Apply the new offset to the SVG path
-        path.style.strokeDashoffset = `${newOffset}`;
-      }
-    });
-    animationFrameId = requestAnimationFrame(step);
+function calculateDuration(power: number, maxPower: number): number {
+  const minDuration = 0.4;
+  const maxDuration = 4.0;
+  const absPower = Math.abs(power || 0);
+
+  let duration: number;
+  if (absPower >= maxPower) {
+    duration = minDuration;
+  } else if (absPower > 0) {
+    duration = maxDuration - (maxDuration - minDuration) * (absPower / maxPower);
+  } else {
+    duration = maxDuration;
   }
-  animationFrameId = requestAnimationFrame(step);
-};
+  // duration in seconds, rounded to 1 decimal place
+  return Math.round(duration * 10) / 10;
+}
+
+// animation durations by component.id
+const animationDurations = computed<Record<string, number>>(() => {
+  const maxPower = maxSystemPower.value;
+
+  const cp1 = Number(chargePoint1Power.value.value);
+  const cp2 = Number(chargePoint2Power.value.value);
+  const cp3 = Number(chargePoint3Power.value.value);
+  const cpSum = Number(chargePointSumPower.value.value);
+
+  const gridVal = Number(gridPower.value.value);
+  const homeVal = Number(homePower.value.value);
+  const pvVal = Number(pvPower.value.value);
+  const batVal = Number(batteryPower.value.value);
+
+  return {
+    grid: calculateDuration(gridVal, maxPower),
+    home: calculateDuration(homeVal, maxPower),
+    pv: calculateDuration(pvVal, maxPower),
+    battery: calculateDuration(batVal, maxPower),
+
+    'charge-point-1': calculateDuration(cp1, maxPower),
+    'charge-point-2': calculateDuration(cp2, maxPower),
+    'charge-point-3': calculateDuration(cp3, maxPower),
+    'charge-point-sum': calculateDuration(cpSum, maxPower),
+
+    'vehicle-1': calculateDuration(cp1, maxPower),
+    'vehicle-2': calculateDuration(cp2, maxPower),
+    'vehicle-3': calculateDuration(cp3, maxPower),
+  };
+});
 
 ///////////////////////// Diagram components /////////////////////////
 
@@ -550,29 +551,6 @@ const svgComponents = computed((): FlowComponent[] => {
   return components;
 });
 
-onMounted(() => {
-  animateDashes();
-});
-
-onUnmounted(() => {
-  if (animationFrameId !== null) {
-    cancelAnimationFrame(animationFrameId);
-    animationFrameId = null;
-  }
-});
-
-watch(
-  svgComponents,
-  (components) => {
-    components.forEach((component) => {
-      if (!(component.id in dashOffsets.value)) {
-        dashOffsets.value[component.id] = 0;
-      }
-    });
-  },
-  { immediate: true, deep: true },
-);
-
 const calculatedRows = computed(() => {
   if (connectedChargePoints.value?.length > 0) {
     return connectedChargePoints.value.length > 3 ? 3 : 4;
@@ -645,6 +623,41 @@ const svgRectWidth = computed(
       svgSize.value.numColumns) /
     svgSize.value.numColumns,
 );
+
+// Hook up the chained-transition controllers.
+// One controller per possible flow-path ID.
+const FLOW_IDS = [
+  'grid',
+  'home',
+  'pv',
+  'battery',
+  'charge-point-1',
+  'charge-point-2',
+  'charge-point-3',
+  'charge-point-sum',
+  'vehicle-1',
+  'vehicle-2',
+  'vehicle-3',
+] as const;
+
+FLOW_IDS.forEach((id) => {
+  const isActive = computed(() => {
+    const component = svgComponents.value.find((component) => component.id === id);
+    return !!component && (component.class.animated || component.class.animatedReverse);
+  });
+
+  const duration = computed(() => {
+    const duration = animationDurations.value[id];
+    return duration ?? 4.0;
+  });
+
+  const reverse = computed(() => {
+    const component = svgComponents.value.find((component) => component.id === id);
+    return !!component?.class.animatedReverse;
+  });
+
+  useEnergyFlowTransition(id, isActive, duration, reverse);
+});
 </script>
 
 <template>
@@ -836,20 +849,9 @@ path {
   transition: stroke 0.5s;
 }
 
-path.animated {
-  stroke: var(--q-white);
-  stroke-dasharray: 5;
-}
-
-path.animatedReverse {
-  stroke: var(--q-white);
-  stroke-dasharray: 5;
-}
-
 path.animated.grid {
   stroke: var(--q-negative);
 }
-
 path.animatedReverse.grid {
   stroke: var(--q-positive);
 }
@@ -866,6 +868,11 @@ path.animatedReverse.grid {
   }
 }
 
+path.animated.home,
+path.animatedReverse.home {
+  stroke: var(--q-flow-home-stroke);
+}
+
 path.animated.pv,
 path.animatedReverse.pv {
   stroke: var(--q-positive);
@@ -877,7 +884,9 @@ path.animatedReverse.battery {
 }
 
 path.animated.charge-point,
-path.animatedReverse.charge-point {
+path.animated.charge-point-sum,
+path.animatedReverse.charge-point,
+path.animatedReverse.charge-point-sum {
   stroke: var(--q-primary);
 }
 
diff --git a/packages/modules/web_themes/koala/source/src/composables/useEnergyFlowTransition.ts b/packages/modules/web_themes/koala/source/src/composables/useEnergyFlowTransition.ts
new file mode 100644
index 0000000000..e604ef63f3
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/composables/useEnergyFlowTransition.ts
@@ -0,0 +1,144 @@
+import {
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  Ref,
+  ComputedRef,
+  nextTick,
+} from 'vue';
+
+export function useEnergyFlowTransition(
+  lineElementId: string,
+  isActive: Ref<boolean> | ComputedRef<boolean>,
+  durationRef: Ref<number> | ComputedRef<number>,
+  reverseRef: Ref<boolean> | ComputedRef<boolean>,
+) {
+  let lineElement: SVGPathElement | null = null;
+  let running = false;
+  let currentOffset = 0;
+  let animationFrameId: number | null = null;
+
+  const handleTransitionEnd = () => {
+    if (!running) return;
+    animationFrameId = window.requestAnimationFrame(advanceAnimationStep);
+  };
+
+  const initializeLineElement = () => {
+    lineElement = document.querySelector(
+      `#flow-path-${lineElementId}`,
+    ) as SVGPathElement | null;
+    if (!lineElement) return;
+    // Initial setup for dashed line
+    lineElement.style.strokeDasharray = '5';
+    lineElement.style.transition = 'none';
+    lineElement.style.strokeDashoffset = '0';
+    currentOffset = 0;
+    //css fires a transitionend event when the animation completes
+    lineElement.removeEventListener('transitionend', handleTransitionEnd);
+    lineElement.addEventListener('transitionend', handleTransitionEnd);
+  };
+
+  const syncCurrentOffsetFromDom = () => {
+    if (!lineElement) return;
+    const strokeDashoffsetString = getComputedStyle(lineElement).strokeDashoffset;
+    const strokeDashoffsetValue = parseFloat(strokeDashoffsetString || '0');
+    if (!Number.isNaN(strokeDashoffsetValue)) {
+      currentOffset = strokeDashoffsetValue;
+    }
+  };
+
+  const advanceAnimationStep = () => {
+    if (!running) return;
+    if (!lineElement) {
+      initializeLineElement();
+      if (!lineElement) return;
+    }
+    // Before computing next step, read the real offset from DOM
+    syncCurrentOffsetFromDom();
+    const direction = reverseRef.value ? 1 : -1;
+    const duration = durationRef.value || 1;
+    const stepSize = 10; // how far one "dash" travels per step
+    // New target position in the stroke dash pattern
+    const targetOffset = currentOffset + stepSize * direction;
+    // Force layout, otherwise browser may optimize away the transition
+    lineElement.getBoundingClientRect();
+    // Apply new offset with transition
+    lineElement.style.transition = `stroke-dashoffset ${duration}s linear`;
+    // Animate toward the next position
+    lineElement.style.strokeDashoffset = String(targetOffset);
+  };
+
+  const start = () => {
+    if (running) return;
+    running = true;
+    if (!lineElement) {
+      initializeLineElement();
+    }
+    if (!lineElement) return;
+    animationFrameId = window.requestAnimationFrame(advanceAnimationStep);
+  };
+
+  const stop = () => {
+    running = false;
+    if (animationFrameId !== null) {
+      window.cancelAnimationFrame(animationFrameId);
+      animationFrameId = null;
+    }
+    if (lineElement) {
+      // Reset strokeDasharray to solid line
+      lineElement.style.transition = 'none';
+      lineElement.style.strokeDasharray = 'none';
+      lineElement.style.strokeDashoffset = '0';
+    }
+  };
+
+  onMounted(() => {
+    if (isActive.value) {
+      nextTick().then(() => {
+        initializeLineElement();
+        if (isActive.value) {
+          start();
+        }
+      });
+    }
+  });
+
+  onBeforeUnmount(() => {
+    stop();
+    if (lineElement) {
+      lineElement.removeEventListener('transitionend', handleTransitionEnd);
+    }
+  });
+
+  // Turn animation on/off when this line becomes active/inactive
+  watch(
+    isActive,
+    (active) => {
+      if (active) {
+        nextTick().then(() => {
+          initializeLineElement();
+          if (isActive.value) {
+            start();
+          }
+        });
+      } else {
+        stop();
+      }
+    },
+    { flush: 'post' },
+  );
+
+  // When duration or direction changes re-step from the current position
+  watch(
+    [durationRef, reverseRef],
+    () => {
+      if (!running || !lineElement) return;
+      if (animationFrameId !== null) {
+        window.cancelAnimationFrame(animationFrameId);
+        animationFrameId = null;
+      }
+      animationFrameId = window.requestAnimationFrame(advanceAnimationStep);
+    },
+    { flush: 'post' },
+  );
+}

From 0a79dfff37029fda6973936398ad07cf4704a5cc Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Thu, 20 Nov 2025 11:52:43 +0100
Subject: [PATCH 6/6] CSS-class per component - dynamic with v-bind - works in
 all browsers

---
 .../energyFlowChart/EnergyFlowChart.vue       | 204 ++++++++++--------
 .../composables/useEnergyFlowTransition.ts    | 144 -------------
 2 files changed, 114 insertions(+), 234 deletions(-)
 delete mode 100644 packages/modules/web_themes/koala/source/src/composables/useEnergyFlowTransition.ts

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index c44f853cda..c3f0dc85f4 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -3,7 +3,6 @@ import { useMqttStore } from 'src/stores/mqtt-store';
 import { ref, computed, watch } from 'vue';
 import type { SvgSize, FlowComponent } from './energy-flow-chart-models';
 import type { ValueObject } from 'src/stores/mqtt-store-model';
-import { useEnergyFlowTransition } from 'src/composables/useEnergyFlowTransition';
 
 const mqttStore = useMqttStore();
 
@@ -270,51 +269,42 @@ const maxSystemPower = computed(() => {
   return Math.max(...filteredPowerValues);
 });
 
-function calculateDuration(power: number, maxPower: number): number {
+function calcDuration(power: number, maxPower: number) {
   const minDuration = 0.4;
   const maxDuration = 4.0;
   const absPower = Math.abs(power || 0);
-
-  let duration: number;
-  if (absPower >= maxPower) {
-    duration = minDuration;
-  } else if (absPower > 0) {
-    duration = maxDuration - (maxDuration - minDuration) * (absPower / maxPower);
-  } else {
-    duration = maxDuration;
-  }
-  // duration in seconds, rounded to 1 decimal place
-  return Math.round(duration * 10) / 10;
+  if (absPower >= maxPower) return `${minDuration}s`;
+  if (absPower > 0)
+    return `${maxDuration - (maxDuration - minDuration) * (absPower / maxPower)}s`;
+  return `${maxDuration}s`;
 }
 
-// animation durations by component.id
-const animationDurations = computed<Record<string, number>>(() => {
+const animationDurations = computed(() => {
   const maxPower = maxSystemPower.value;
-
-  const cp1 = Number(chargePoint1Power.value.value);
-  const cp2 = Number(chargePoint2Power.value.value);
-  const cp3 = Number(chargePoint3Power.value.value);
-  const cpSum = Number(chargePointSumPower.value.value);
-
-  const gridVal = Number(gridPower.value.value);
-  const homeVal = Number(homePower.value.value);
-  const pvVal = Number(pvPower.value.value);
-  const batVal = Number(batteryPower.value.value);
-
   return {
-    grid: calculateDuration(gridVal, maxPower),
-    home: calculateDuration(homeVal, maxPower),
-    pv: calculateDuration(pvVal, maxPower),
-    battery: calculateDuration(batVal, maxPower),
-
-    'charge-point-1': calculateDuration(cp1, maxPower),
-    'charge-point-2': calculateDuration(cp2, maxPower),
-    'charge-point-3': calculateDuration(cp3, maxPower),
-    'charge-point-sum': calculateDuration(cpSum, maxPower),
-
-    'vehicle-1': calculateDuration(cp1, maxPower),
-    'vehicle-2': calculateDuration(cp2, maxPower),
-    'vehicle-3': calculateDuration(cp3, maxPower),
+    grid: calcDuration(Number(gridPower.value.value), maxPower),
+    home: calcDuration(Number(homePower.value.value), maxPower),
+    pv: calcDuration(Number(pvPower.value.value), maxPower),
+    battery: calcDuration(Number(batteryPower.value.value), maxPower),
+    chargePoint1: calcDuration(
+      Number(chargePoint1Power.value.value),
+      maxPower,
+    ),
+    chargePoint2: calcDuration(
+      Number(chargePoint2Power.value.value),
+      maxPower,
+    ),
+    chargePoint3: calcDuration(
+      Number(chargePoint3Power.value.value),
+      maxPower,
+    ),
+    chargePointSum: calcDuration(
+      Number(chargePointSumPower.value.value),
+      maxPower,
+    ),
+    vehicle1: calcDuration(Number(chargePoint1Power.value.value), maxPower),
+    vehicle2: calcDuration(Number(chargePoint2Power.value.value), maxPower),
+    vehicle3: calcDuration(Number(chargePoint3Power.value.value), maxPower),
   };
 });
 
@@ -395,6 +385,7 @@ const svgComponents = computed((): FlowComponent[] => {
         id: 'charge-point-1',
         class: {
           base: 'charge-point',
+          animationId: 'charge-point-1',
           valueLabel: '',
           animated: chargePoint1Discharging.value,
           animatedReverse: chargePoint1Charging.value,
@@ -417,6 +408,7 @@ const svgComponents = computed((): FlowComponent[] => {
           id: 'vehicle-1',
           class: {
             base: 'vehicle',
+            animationId: 'vehicle-1',
             valueLabel:
               'fill-' + chargePoint1ConnectedVehicleChargeMode.value.class,
             animated: chargePoint1Discharging.value,
@@ -442,6 +434,7 @@ const svgComponents = computed((): FlowComponent[] => {
           id: 'charge-point-2',
           class: {
             base: 'charge-point',
+            animationId: 'charge-point-2',
             valueLabel: '',
             animated: chargePoint2Discharging.value,
             animatedReverse: chargePoint2Charging.value,
@@ -465,6 +458,7 @@ const svgComponents = computed((): FlowComponent[] => {
           id: 'vehicle-2',
           class: {
             base: 'vehicle',
+            animationId: 'vehicle-2',
             valueLabel:
               'fill-' + chargePoint2ConnectedVehicleChargeMode.value.class,
             animated: chargePoint2Discharging.value,
@@ -490,6 +484,7 @@ const svgComponents = computed((): FlowComponent[] => {
           id: 'charge-point-3',
           class: {
             base: 'charge-point',
+            animationId: 'charge-point-3',
             valueLabel: '',
             animated: chargePoint3Discharging.value,
             animatedReverse: chargePoint3Charging.value,
@@ -510,6 +505,7 @@ const svgComponents = computed((): FlowComponent[] => {
           id: 'vehicle-3',
           class: {
             base: 'vehicle',
+            animationId: 'vehicle-3',
             valueLabel:
               'fill-' + chargePoint3ConnectedVehicleChargeMode.value.class,
             animated: chargePoint3Discharging.value,
@@ -534,6 +530,7 @@ const svgComponents = computed((): FlowComponent[] => {
         id: 'charge-point-sum',
         class: {
           base: 'charge-point',
+          animationId: 'charge-point-sum',
           valueLabel: '',
           animated: chargePointSumDischarging.value,
           animatedReverse: chargePointSumCharging.value,
@@ -623,41 +620,6 @@ const svgRectWidth = computed(
       svgSize.value.numColumns) /
     svgSize.value.numColumns,
 );
-
-// Hook up the chained-transition controllers.
-// One controller per possible flow-path ID.
-const FLOW_IDS = [
-  'grid',
-  'home',
-  'pv',
-  'battery',
-  'charge-point-1',
-  'charge-point-2',
-  'charge-point-3',
-  'charge-point-sum',
-  'vehicle-1',
-  'vehicle-2',
-  'vehicle-3',
-] as const;
-
-FLOW_IDS.forEach((id) => {
-  const isActive = computed(() => {
-    const component = svgComponents.value.find((component) => component.id === id);
-    return !!component && (component.class.animated || component.class.animatedReverse);
-  });
-
-  const duration = computed(() => {
-    const duration = animationDurations.value[id];
-    return duration ?? 4.0;
-  });
-
-  const reverse = computed(() => {
-    const component = svgComponents.value.find((component) => component.id === id);
-    return !!component?.class.animatedReverse;
-  });
-
-  useEnergyFlowTransition(id, isActive, duration, reverse);
-});
 </script>
 
 <template>
@@ -675,6 +637,7 @@ FLOW_IDS.forEach((id) => {
           :id="`flow-path-${component.id}`"
           :class="[
             component.class.base,
+            component.class.animationId,
             { animated: component.class.animated },
             { animatedReverse: component.class.animatedReverse },
           ]"
@@ -849,50 +812,111 @@ path {
   transition: stroke 0.5s;
 }
 
+/* Basis for all animated lines */
+path.animated {
+  animation-name: dash;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  stroke-dasharray: 5;
+}
+path.animatedReverse {
+  animation-name: dashReverse;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  stroke-dasharray: 5;
+}
+
 path.animated.grid {
   stroke: var(--q-negative);
+  animation-duration: v-bind('animationDurations.grid');
 }
 path.animatedReverse.grid {
   stroke: var(--q-positive);
-}
-
-:root {
-  path.home {
-    stroke: var(--q-grey);
-  }
-}
-
-.body--dark {
-  path.home {
-    stroke: var(--q-white);
-  }
+  animation-duration: v-bind('animationDurations.grid');
 }
 
 path.animated.home,
 path.animatedReverse.home {
   stroke: var(--q-flow-home-stroke);
+  animation-duration: v-bind('animationDurations.home');
 }
 
 path.animated.pv,
 path.animatedReverse.pv {
   stroke: var(--q-positive);
+  animation-duration: v-bind('animationDurations.pv');
 }
 
 path.animated.battery,
 path.animatedReverse.battery {
   stroke: var(--q-warning);
+  animation-duration: v-bind('animationDurations.battery');
 }
 
-path.animated.charge-point,
+path.animated.charge-point-1,
+path.animatedReverse.charge-point-1 {
+  stroke: var(--q-primary);
+  animation-duration: v-bind('animationDurations.chargePoint1');
+}
+path.animated.charge-point-2,
+path.animatedReverse.charge-point-2 {
+  stroke: var(--q-primary);
+  animation-duration: v-bind('animationDurations.chargePoint2');
+}
+path.animated.charge-point-3,
+path.animatedReverse.charge-point-3 {
+  stroke: var(--q-primary);
+  animation-duration: v-bind('animationDurations.chargePoint3');
+}
 path.animated.charge-point-sum,
-path.animatedReverse.charge-point,
 path.animatedReverse.charge-point-sum {
   stroke: var(--q-primary);
+  animation-duration: v-bind('animationDurations.chargePointSum');
 }
 
-path.animated.vehicle,
-path.animatedReverse.vehicle {
+path.animated.vehicle-1,
+path.animatedReverse.vehicle-1 {
+  stroke: var(--q-accent);
+  animation-duration: v-bind('animationDurations.vehicle1');
+}
+path.animated.vehicle-2,
+path.animatedReverse.vehicle-2 {
   stroke: var(--q-accent);
+  animation-duration: v-bind('animationDurations.vehicle2');
+}
+path.animated.vehicle-3,
+path.animatedReverse.vehicle-3 {
+  stroke: var(--q-accent);
+  animation-duration: v-bind('animationDurations.vehicle3');
+}
+
+@keyframes dash {
+  from {
+    stroke-dashoffset: 10;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes dashReverse {
+  from {
+    stroke-dashoffset: 0;
+  }
+  to {
+    stroke-dashoffset: 10;
+  }
+}
+
+:root {
+  path.home {
+    stroke: var(--q-grey);
+  }
+}
+
+.body--dark {
+  path.home {
+    stroke: var(--q-white);
+  }
 }
 
 circle {
diff --git a/packages/modules/web_themes/koala/source/src/composables/useEnergyFlowTransition.ts b/packages/modules/web_themes/koala/source/src/composables/useEnergyFlowTransition.ts
deleted file mode 100644
index e604ef63f3..0000000000
--- a/packages/modules/web_themes/koala/source/src/composables/useEnergyFlowTransition.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-import {
-  watch,
-  onMounted,
-  onBeforeUnmount,
-  Ref,
-  ComputedRef,
-  nextTick,
-} from 'vue';
-
-export function useEnergyFlowTransition(
-  lineElementId: string,
-  isActive: Ref<boolean> | ComputedRef<boolean>,
-  durationRef: Ref<number> | ComputedRef<number>,
-  reverseRef: Ref<boolean> | ComputedRef<boolean>,
-) {
-  let lineElement: SVGPathElement | null = null;
-  let running = false;
-  let currentOffset = 0;
-  let animationFrameId: number | null = null;
-
-  const handleTransitionEnd = () => {
-    if (!running) return;
-    animationFrameId = window.requestAnimationFrame(advanceAnimationStep);
-  };
-
-  const initializeLineElement = () => {
-    lineElement = document.querySelector(
-      `#flow-path-${lineElementId}`,
-    ) as SVGPathElement | null;
-    if (!lineElement) return;
-    // Initial setup for dashed line
-    lineElement.style.strokeDasharray = '5';
-    lineElement.style.transition = 'none';
-    lineElement.style.strokeDashoffset = '0';
-    currentOffset = 0;
-    //css fires a transitionend event when the animation completes
-    lineElement.removeEventListener('transitionend', handleTransitionEnd);
-    lineElement.addEventListener('transitionend', handleTransitionEnd);
-  };
-
-  const syncCurrentOffsetFromDom = () => {
-    if (!lineElement) return;
-    const strokeDashoffsetString = getComputedStyle(lineElement).strokeDashoffset;
-    const strokeDashoffsetValue = parseFloat(strokeDashoffsetString || '0');
-    if (!Number.isNaN(strokeDashoffsetValue)) {
-      currentOffset = strokeDashoffsetValue;
-    }
-  };
-
-  const advanceAnimationStep = () => {
-    if (!running) return;
-    if (!lineElement) {
-      initializeLineElement();
-      if (!lineElement) return;
-    }
-    // Before computing next step, read the real offset from DOM
-    syncCurrentOffsetFromDom();
-    const direction = reverseRef.value ? 1 : -1;
-    const duration = durationRef.value || 1;
-    const stepSize = 10; // how far one "dash" travels per step
-    // New target position in the stroke dash pattern
-    const targetOffset = currentOffset + stepSize * direction;
-    // Force layout, otherwise browser may optimize away the transition
-    lineElement.getBoundingClientRect();
-    // Apply new offset with transition
-    lineElement.style.transition = `stroke-dashoffset ${duration}s linear`;
-    // Animate toward the next position
-    lineElement.style.strokeDashoffset = String(targetOffset);
-  };
-
-  const start = () => {
-    if (running) return;
-    running = true;
-    if (!lineElement) {
-      initializeLineElement();
-    }
-    if (!lineElement) return;
-    animationFrameId = window.requestAnimationFrame(advanceAnimationStep);
-  };
-
-  const stop = () => {
-    running = false;
-    if (animationFrameId !== null) {
-      window.cancelAnimationFrame(animationFrameId);
-      animationFrameId = null;
-    }
-    if (lineElement) {
-      // Reset strokeDasharray to solid line
-      lineElement.style.transition = 'none';
-      lineElement.style.strokeDasharray = 'none';
-      lineElement.style.strokeDashoffset = '0';
-    }
-  };
-
-  onMounted(() => {
-    if (isActive.value) {
-      nextTick().then(() => {
-        initializeLineElement();
-        if (isActive.value) {
-          start();
-        }
-      });
-    }
-  });
-
-  onBeforeUnmount(() => {
-    stop();
-    if (lineElement) {
-      lineElement.removeEventListener('transitionend', handleTransitionEnd);
-    }
-  });
-
-  // Turn animation on/off when this line becomes active/inactive
-  watch(
-    isActive,
-    (active) => {
-      if (active) {
-        nextTick().then(() => {
-          initializeLineElement();
-          if (isActive.value) {
-            start();
-          }
-        });
-      } else {
-        stop();
-      }
-    },
-    { flush: 'post' },
-  );
-
-  // When duration or direction changes re-step from the current position
-  watch(
-    [durationRef, reverseRef],
-    () => {
-      if (!running || !lineElement) return;
-      if (animationFrameId !== null) {
-        window.cancelAnimationFrame(animationFrameId);
-        animationFrameId = null;
-      }
-      animationFrameId = window.requestAnimationFrame(advanceAnimationStep);
-    },
-    { flush: 'post' },
-  );
-}