hfhbd / routing-compose

Routing feature for Compose Web, Compose HTML and Desktop
https://routing.softwork.app/
Apache License 2.0
139 stars 14 forks source link

How to implement animation while changing between the screens? #185

Open chipnesh opened 2 years ago

chipnesh commented 2 years ago

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 commented 2 years ago

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 commented 1 year ago

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