sveltejs
Spring animation sometimes has negative start offset
#4531
Describe the bug In some situations animating a spring causes the spring value to animate in the wrong direction for the first tick.
For example, animating 100 to 0, logging the values shows: 100.1 -> 98 -> 87 -> etc.
That 100.1 is problematic as it causes a slight jump.
To Reproduce I've not been able to reproduce this in the REPL but I've debugged the spring.ts file.
It seems the value returned by the now() function that is set to the last_time variable at line 99 can be different from the now value in the loop, which causes the first tick of the spring to be in the past resulting in a negative start point.
I suspect setting now inside the animation loop will fix this.
if (value == null || opts.hard || (spring.stiffness >= 1 && spring.damping >= 1)) {
cancel_task = true;
last_time = null; // set to null instead of now() on line 88
// ... rest of code
if (!task) {
last_time = null; // set to null instead of now() on line 99
cancel_task = false;
task = loop(now => {
// set now here, if it's not available, it's set to first frame of loop
if (last_time === null) last_time = now;
if (cancel_task) {
cancel_task = false;
// ... rest of code
Expected behavior The value should not jump up before being lowered.
Information about your Svelte project:
- Tested on Chrome latest and Firefox latest
- MacOS Catalina
- Svelte 3.6.1
- Rollup
Severity This is causing animations to slightly jump when they start, I'll probably create a custom spring.ts function to work around this.
I ran into the same issue while making a draggable bottom sheet component where the spring used for snapping had a tendency to jump at start. Your fix inside the spring function resolved the issue so hope to see it merged. :thumbsup:
