Svelte 5: Transition easing functions aren't reversed during out transition

[aradalvand]

Describe the bug

Take cubicOut as an example; in Svelte 4, this is what it looks like (see REPL):

Rec.0004.mp4

Nice and graceful.

Now, in Svelte 5, however, the same exact code yields a very different "out" transition (see REPL):

Rec.0005.mp4

Which fails to reverse the easing, and thereby creates a jarring look; this is presumably because internally Animation.reverse() is being called for the out transition, which results in the latter type of "reversing". But this never looks good; Svelte 4's way of "reversing" the transition was the "correct" one. The Web Animations API's reverse() method doesn't reverse the easing, which, again, feels jarring and isn't normally what you want; so just calling reverse() isn't sufficient on its own.

There is presumably some way to simulate the former behavior using the Web Animations API, but I haven't looked into that.

It's worth noting that the former behavior is also how plain old CSS transitions (+ toggling classes) work (i.e. they also reverse the easing); so, as I said, Svelte 4 is the one doing the most natural/expected thing here. Svelte 5 should follow suit.

Reproduction

See the REPLs linked above.

Logs

No response

System Info

N/A (see the REPLs)

Severity

blocking an upgrade

[robertadamsonsmith]

I was wondering if this could be worked around, by creating a custom transition function which dynamically switches the easing function for a reversed one when the out transition is playing.

It appears that isn't possible due to the fix in #8318 not being merged (which would allow the transition function to know the current transition direction), and also because it appears that the easing function cannot be dynamically altered, as used to be possible (which is itself a shame, since that sort of dynamic behaviour is useful).

Repl example here

Switching the transition for separate in and out transitions does somewhat work around the problem, but then means that an interrupted/reversed outro causes a sudden jump instead of a smooth transition (as when transition is used, or the intro is interrupted/reversed), which may itself be an issue.

[aradalvand]

Switching the transition for separate in and out transitions does somewhat work around the problem, but then means that an interrupted/reversed outro causes a sudden jump instead of a smooth transition (as when transition is used, or the intro is interrupted/reversed)

Yeah well, as you noticed, that's not a solution, since the animation couldn't be reversed halfway through when you have separate in and out transitions; which has always been one the key features of Svelte transitions (and also CSS transitions, for that matter).

This seems to me like something that should be fixed by Svelte internally, there's just no possible workaround.

Although the flexibility that something like a direction parameter would bring about would certainly be useful even beyond this particular problem; though I'm not sure how doable that is.

[xamir82]

I was recently wondering why transitions felt weird in v5, just found out this is the culprit. I'd like to see this fixed too.

[aradalvand]

After playing with the Web Animations API a little bit, I believe I found out a pretty straightforward way to pull this off:

When the outro animation needs to be played, instead of using the native .reverse() method, Svelte could play a new animation with the same easing function on the element (this in effect reverses the easing since this is now a forwards animation, but the "motion" is outro, if you will), at the end of which, the element is removed.

Here's a very basic demo.

This achieves the desired effect:

Rec.0008.mp4

[robertadamsonsmith]

Looking at @aradalvand 's idea, I had a go at improving the behaviour by having the first keyframe state be determined via getComputedStyle (a bit like transition/fly does) when there is a transition already in progress. This makes the transition animation very robust, and tolerant of multiple cancellations and restarts for either the intro or outro transition without glitching.

REPL link to demo

You should be able to hammer on the animate button, and have everything work as expected.

Whether this sort of approach is suitable for incorporating into Svelte is another matter though (I don't know the specifics of how transitions are now implemented, other than the general move to using the animation API).

[aradalvand]

Thanks @robertadamsonsmith, that's nice, good job. I think that's the way to go.

Also, it just occurred to me that this very approach could be used to make separate in and out transitions reversible as well, even improving upon Svelte 4 in this regard.

Waiting for the maintainers now to tell us what they think.

[robertadamsonsmith]

It looks like Svelte 5 is still building keyframes from the css callback returned by transition function, and since the fly function is already starting from the current style via getComputedStyle, I'm not actually sure why things are misbehaving - this seems like something that should be fixable, but I don't follow the logic in svelte/packages/svelte/src/internal/client/transitions.js well enough to understand exactly what is going on.

[trueadm]

Thanks, I'll take a look when I'm back after the holidays :)

I do wonder if this is actually a bug in Web Animations API though. I would have expected reverse to apply the easing in reverse too. I wonder if there's some configuration we're missing to make that work as expected? However if it turns out we can't use this API then we can likely do something like mentioned above, however the downside is that this won't play as smoothly when applying it to an existing transition that is active (Svelte 4 is janky with this on low end devices, Web Animations are smoother here).

[denlukia]

Wait, am I the only one here for who the very first video of this issue looks nothing like "Nice and graceful."?

And the second one looks like "Yep, thats the correctly reversed outro".

It's not perfect. But to me it's the correct outro at least for the shown intro.

It's rather expectations question – "When we are specifying easing for the transition, are we expecting easing to be reversed on outro together with transition".

Personally I think of an easing as an inseparable stylistic description of a transition, when transition behaves reversed it behaves reversed in its whole – with easing

[xamir82]

am I the only one here

Yes.