How to cancel / reset an async chain in useSpring?

[arturhenryy]

The documentation for the changelogs for v9 states:

"Additionally, async animations are no longer cancelled when the props are updated. Async chains (eg: to: [{}, {}]) are never cancelled, even if another chain begins. Async scripts (eg: to: async () => {}) are only interrupted when another script or chain begins."

So i understand that this was intoduced to prevent the animation from cancelling once a rerender happens due to props change, which is good. But if i want to manually cancel this animation how would i do this?

  const buttonAnimationProps = useSpring({
    ref: buttonSpringRef,
    to: [
      {
        width: "31%",
        backgroundColor: "#739FBC",
        pointerEvents: "none",
        config: { duration: 350 },
      },
      { width: "5%", backgroundColor: "#0B64A0", config: { duration: 250 } },
      { left: "0%", config: { tension: 1050, friction: 100 } },
      { left: "0%", color: "#fff", config: { duration: 50 } },
      {
        width: "100}%",
        config: { tension: browserStore.isTabletAndLarger ? 65 : 40, friction: 40 },
      },
    ],
    from: {
      width: browserStore.isTabletAndLarger ? "25.5%" : "20%",
      left: !browserStore.isTabletAndLarger ? "initial" : "103%",
      backgroundColor: "#0B64A0",
      color: "transparent",
    },
    delay: 100,
    cancel: animationToggled === false,
  });

i used the cancel property but that has no effect. Also i tried the reset method, which also had no effect. Additionally i tried using the ref api controller instance and its methods to reset, but that did not work either.

[aleclarson]

There are a few fixes to "async animations" waiting to be released. If you provide a minimal sandbox (fork this one) or .git url that shows the issue, I'll let you know if this will be fixed in the next version. Alternatively, you can try cloning the v9 branch and trying it out yourself (see here).

[arturhenryy]

Hi Alec, thanks for getting back. So i forked the sandbox you provided and made a minimal representation of the problem for you. https://codesandbox.io/s/currying-resonance-614om?file=/src/App.js

[arturhenryy]

hi @aleclarson did you had a chance to look at the sandbox yet?