How to implement animation while changing between the screens?

[chipnesh]

Hello. Is it possible to implement some visual effects while navigating through the screens? I mean effects like fade, slide, scale and so on. Are there any extension points to do it by myself?

[hfhbd]

Hey, nice question.

How do you use animation with Compose Web at all? I didn't test it myself yet.

Are there any extension points to do it by myself?

As a consumer, I don't think so. The actual routing is done in the route builder and its implementation is internal.

Is it possible to implement some visual effects while navigating through the screens?

Maybe. Many routing frameworks split the navigation tree and the actual rendering, I did this in the past too. But the current implementation, which supports dynamic changing the tree and using @Composables everywhere, eg to have a common header, results in a single tree that needs to evaluate the content twice: first to find the correct route, and if found, it needs to cancel the search and display the correct route. At the moment canceling results in a second composition. Maybe it is possible to avoid it. Depending on the speed and the animation, starting the animation twice could work without ui glitches, but ideally, the content will be only composed once.

Another open question: What do you want to animate, only forwarding or back navigation too? Only during entering or leaving too? Do you want to provide both animations or should leaving be automatically reversed? What about redirecting?

To prevent calling the animation twice I would try to compose the content only once first.

[rocketraman]

For the web, this is timely: https://developer.chrome.com/blog/spa-view-transitions-land/