Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
chipnesh opened this issue Jun 17, 2022 · 2 comments
Open

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

chipnesh opened this issue Jun 17, 2022 · 2 comments

Comments

@chipnesh
Copy link

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
Copy link
Owner

hfhbd commented Jun 17, 2022

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants