5.8.0 Spring instant option unexpected behavior. #14645
Description
Describe the bug
After using {instant: true} to set() the value of a Spring, I noticed that sometimes running another, non-instant, set() shortly after would seem to flash an unexpected value. In the attached reproduction link, I use a Spring to animate the rotation of a div. Once the returned .set() Promise resolves, I check if the value is > 360 or < 0, in which case I use instant to set the value of a Spring to between 0 and 360. Shortly after this, if I scroll again to increase the rotation, I see the div flash to a different rotation and then animate to the newly set value. See the attached gif.
I have done some minimal investigating and think I might have found part of the problem and maybe a solution, but bear in mind, this is my first foray into the src files and I'm just going off hunches right now.
In motion/spring.js I have added the line this.#last_value = value; after the #current value is set. See code snip below. I think holding onto the previous #last_value was causing some weirdness in future value updates. After building a local version of svelte with this change and linking an existing project to this new svelte, I no longer see the weird glitchy behavior. I still need to investigate this further to see if I fully understand the root of this issue and whether this is a total fix. In the mean time, I wanted to post this Bug Report so maybe better minds might fix things faster! 😅
if (options?.instant || this.#current.v === undefined) {
this.#task?.abort();
this.#task = null;
set(this.#current, set(this.#target, value));
this.#last_value = value; // <-- My addition
return Promise.resolve();
}
Reproduction
https://svelte.dev/playground/c25923f7f0ea44d59b4a3503110ede05?version=5.10.0
Logs
No response
System Info
System:
OS: Linux 6.11 Arch Linux
CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
Memory: 40.37 GB / 62.72 GB
Container: Yes
Shell: 5.2.37 - /bin/bash
Binaries:
Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v18.14.2/bin/yarn
npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm
pnpm: 9.15.0 - ~/.nvm/versions/node/v18.14.2/bin/pnpm
npmPackages:
svelte: file:../open-source-stuff/svelte/packages/svelte => 69.420.1Severity
annoyance