Transitions do not update when they are parameterized by store value

[shenker]

Describe the bug
Based on the Svelte tutorial, I expected that if I specify a transition like out:fly="{{ x: $shift_right*800 }} (where $shift_right is either +1 or -1), and I call shift_right.set(-1) before the out transition is triggered, I should be able to change the direction that the element flies out.

To Reproduce
Take a look at this REPL: https://svelte.dev/repl/d1dbcb82b61f4e92b80a49aa215d43fe?version=3.24.1

Use the arrows to shift left and right. If you press a particular direction repeatedly (e.g., right/right/right) it works as expected. But when you alternate between right and left (e.g., right/left/right/left), the direction of motion for the old element fly out and the new element fly in transitions are different.

Expected behavior
As I shift left and right using the buttons, I expect that the previous content will fly out in the same direction as the new content is flying in, because both of these should be set by $shift_right (which is either +1 or -1). Instead, the direction (sign of the x parameter) for the fly animation for existing content is not updated when the store value changes. I thought that await tick() might solve this, but it did not.

Information about your Svelte project:

• Chrome Version 84.0.4147.105 (Official Build) (64-bit)
• macOS 10.15.6
• Svelte 3.24.1
• rollup (using the routify-starter template)

Severity
I'm not sure how to work around this. I found this behavior quite unexpected, so if this is the intended behavior, it would be great to have this clarified in the docs/tutorial. I'm new to Svelte, so if there's a better/more elegant way to do what I'm trying to do, would very much appreciate guidance on that point!

There also appears to be a separate issue that fly in from the left does not animate smoothly (whereas fly in from the right does). To see this, if you shift repeatedly left (e.g., click the left arrow repeatedly), everything animates smoothly. But if you shift repeatedly right, the fly in animation isn't smooth.

[Conduitry]

I haven't looked closely, but it sounds like this might be a duplicate of #3633. Never mind, probably, that was about two-way transitions.

[NasirKhalid24]

I tried to narrow it down and believe the problem is caused by 'out:fly'. In this REPL when we use only 'in:fly' the animation follows the parametrized store value. However, if you change 'in:fly' to 'out:fly' the animation does not behave as per the parametrized store value

It takes extra button clicks until the animation switches directions based on the parametrized value.

Also, I think you mean to initialize shift_right to -1 in store.js since you start at set:0 - doing this fixes the initial janky animation.

[JHethDev]

Similar situation here, see this REPL. It seems that the behavior only happens inside an each block.

This REPL is the same thing without the each block just a series of tedious if blocks and it works great.

Edit: Here's a REPL of a truly hideous workaround I found for my situation where I put the transition outside the each block and flip between 2 identical each blocks... I feel dirty but this is the only way it works for me currently.

[grohjy]

One workaround is to change fly-function to your own custom myFly-function and call the fly from it:
const myFly=(el)=> fly(el,{ x: -$shift_right*800, duration: 750, easing: circIn, opacity: 1 })

And in div:

<div in:fly=”{{x: $shift_right*800}}” out:myFly>

[Conduitry]

This is fixed in 3.25.1. - https://svelte.dev/repl/d1dbcb82b61f4e92b80a49aa215d43fe?version=3.25.1