Victory: Animation has approx 1 sec delay before starting

[jeghers]

When animation is turned on, it seems a long delay of about 1 second occurs before the animation begins (leaving the chart blank and empty for an awkward amount of time, no settings I can find get rid of it.

<VictoryChart
  responsive={false}
  domain={{ x: [0, 10] }}
  domainPadding={{ y: 80 }}
>
  <VictoryStack
    horizontal
    colorScale={["lightgreen", "red"]}
    animate={{
      onLoad: { delay: 0, duration: 800 },
      easing: "expInOut",
    }}
    style={{
      data: { width: 45, opacity: 0.7 },
      labels: { fontSize: 14 },
      parent: { border: "1px solid #ccc" }
    }}
  >
    <VictoryBar
      categories={{ x: [ "cats", "dogs" ] }}
      data={[{ x: "cats", y: 6 }, { x: "dogs", y: 3 }]}
    />
    <VictoryBar
      categories={{ x: [ "cats", "dogs" ] }}
      data={[{ x: "cats", y: 3 }, { x: "dogs", y: 5 }]}
    />
  </VictoryStack>
</VictoryChart>

[bewildergeist]

Try setting a duration setting on top-level animate object too (i.e. sibling to onLoad and easing). That seems to do the trick for me, oddly enough.

[s-kris]

When animation is turned on, it seems a long delay of about 1 second occurs before the animation begins (leaving the chart blank and empty for an awkward amount of time, no settings I can find get rid of it.

<VictoryChart
  responsive={false}
  domain={{ x: [0, 10] }}
  domainPadding={{ y: 80 }}
>
  <VictoryStack
    horizontal
    colorScale={["lightgreen", "red"]}
    animate={{
      onLoad: { delay: 0, duration: 800 },
      easing: "expInOut",
    }}
    style={{
      data: { width: 45, opacity: 0.7 },
      labels: { fontSize: 14 },
      parent: { border: "1px solid #ccc" }
    }}
  >
    <VictoryBar
      categories={{ x: [ "cats", "dogs" ] }}
      data={[{ x: "cats", y: 6 }, { x: "dogs", y: 3 }]}
    />
    <VictoryBar
      categories={{ x: [ "cats", "dogs" ] }}
      data={[{ x: "cats", y: 3 }, { x: "dogs", y: 5 }]}
    />
  </VictoryStack>
</VictoryChart>

can confirm

[BradleyJrichardson]

anyone with a fix?

[iwan-uschka]

Any news on this one? The delay is still present in version 34.3.11.

[gildas-succubus]

I've fixed that issue like this :
<VictoryChart animate={{onLoad: { delay: 0, duration: 1 }, duration: 500}} >

The duration of the effect is 500ms. Hope this helps

[iwan-uschka]

I thought i gave that a try already 🤔 but yes, this does the trick. Thanks @gildas-succubus