strange behavior when switching fast

[dartess]

If you toggle the animation fairly quickly, before it has finished, the animation behavior becomes weird. Some animations are cancelled. Part of the animations tries to play, but often gets incorrect coordinate data (as far as I understand) and it looks unsuccessful.

I got a problem in a spoiler component that has the ability to change its state quite quickly. The closest official example is the accordion.

The problem is easy to observe with a large duration value.

Screen.Recording.2023-04-25.at.15.22.24.mov

If it's an API limitation and the animation can't be continued in the middle, perhaps it would be worth canceling the current animation completely before starting a new one?

[dartess]

Or maybe it's possible to prevent new animations from starting before the previous one has completed?

[justin-schroeder]

It is possible to do that, but we made the decision early on that it is better to respond to the user interaction by jumping to the new state immediately. Clicking and not having instant feedback was worse (imho) than a bit of jank. Not sure what an elegant solution should be in this case

[dartess]

@justin-schroeder
Ideologically, this is the 100% right decision. But the current version is unfortunately inferior to the @mui animations, which we want to abandon.

First solution that came to mind:
Before starting a new animation, fast-forward the current one to the finish, and then start a new one.
Judging by the video, this is partly what happens. But perhaps some of the animations work out incorrectly. Perhaps the sizes / positions are incorrectly calculated to start a new animation.
I tried to do it myself, but did not succeed and decided to come here with the original problem.