fix(Spline): Improve initial tweened transition

techniq · Nov 5, 2024 · ddddb7e · ddddb7e
1 parent d94a89b
commit ddddb7e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/.changeset/fifty-spiders-mate.md b/.changeset/fifty-spiders-mate.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Spline): Improve initial `tweened` transition
diff --git a/packages/layerchart/src/lib/components/Spline.svelte b/packages/layerchart/src/lib/components/Spline.svelte
@@ -90,10 +90,17 @@
   $: xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
   $: yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
 
+  /** Provide initial `0` horizontal baseline and initially hide/untrack scale changes so not reactive (only set on initial mount) */
+  function defaultPathData() {
+    const [xRangeMin, xRangeMax] = $xScale.range();
+    const yRangeZero = $yScale(0);
+    return `M${xRangeMin},${yRangeZero} L${xRangeMax},${yRangeZero}`;
+  }
+
   let d: string | null = '';
   // @ts-expect-error
   $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
-  $: tweened_d = motionStore('', { tweened: tweenedOptions });
+  $: tweened_d = motionStore(defaultPathData(), { tweened: tweenedOptions });
   $: {
     const path = $radial
       ? lineRadial()