Fly transition jumps when element is translated

[geoffrich]

Describe the bug If you translate an element with a fly transition applied to it, the transition can "jump" and not be smooth. This mainly seems to occur if you change the translation amount after transitioning the element in and out once.

Here's a GIF of the issue in action. You'll notice that it is smooth at first, but the second transition (after translating the element) starts by abruptly jumping to the right.

To Reproduce

1. Trigger a fly transition in and out on an element.
2. Translate the element
3. Trigger the transition again. You'll notice a "jump" at the start of the transition

See my REPL for an interactive demo showing the issue.

Expected behavior The transition is smooth and does not jump.

Information about your Svelte project:

• Browser: Firefox 83 / Chrome 87
• Operating system: Windows 10
• Svelte version: 3.30.1

Severity This is an annoying, but not blocking, issue. It made a recent demo I made a little more janky.

[tanhauhau]

the fly transition will apply transform to the same element, setting the translate from 0px to -100px, thus, the jump from the initially -50px to 0px.

I wonder what will be your expectation after setting translate to -50px?

1. the fly will translate the element from -50px to -150px?

or

2. the fly will translate the element from -50px to -100px, thus travelling a shorter distance in the same duration?

[geoffrich]

Good question -- I would expect the element to translate from -50px to -150px. I should be able to translate the element all around the screen. When the time comes to transition the element out, it should be translated out from its current position with the parameters specified so the transition is smooth.

Interestingly, this only seems to be an issue when the transition directive is used. If you update my linked REPL to use in:fly={{x: -100, opacity: 1}} out:fly={{x: -100, opacity: 1}} instead of transition:fly={{x: -100, opacity: 1}}, the problem does not occur.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[geoffrich]

Still an issue as of v3.38.3.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[joleeee]

I am still getting this. Not stale

[dummdidumm]

Fixed in Svelte 5