Does anyone know if `navigation-compose` ever added transitions? Trying to catch up on the last seve...

# compose

[Sam]

Does anyone know if navigation-compose ever added transitions? Trying to catch up on the last several versions but I didn’t see anything in the release notes, and I swear there was an issue about it but nothing related in the issue tracker: https://issuetracker.google.com/issues?q=componentid:409828

[Ian Lake]

Still being tracked in https://issuetracker.google.com/issues/172112072

[Sam]

There it is, thanks @Ian Lake! So is there any update? Really hard to tell from the issue if it’s eventually coming or we should give up and start hacking to our best effort..

[Ian Lake]

Definitely coming. How transitions in Compose work is that you need to hold onto all state until the exit transition actually completes (otherwise the state just instantly disappears). That's very different from the View world where a snapshot of the Views would be animated out. It means some infrastructural work is needed in Navigation to support that delayed removal of state, but it has also meant that we've been working very closely with @Doris Liu on exactly what that transition APIs should look like to set you up for future work like shared elements, etc.

[Sam]

Very helpful @Ian Lake, in the meantime we’ll live without transitions and instant screen switch until it lands 👍

[Doris Liu]

In the meantime, we'd love to see a demo of the sort of transition you are trying to achieve, to make sure the transition APIs take that into consideration. 🙂

[Sam]

here are the ones we need:
• custom zoom (which requires starting dimensions and shared objects)
• modal from bottom (pretty standard)
• slide-in-from-left for drilling into details screens (standard in iOS NavigationController)

screen-transition-examples.mov

[Filip Wiesner]

Is it planned for 1.0 release or it's not a priority right now? I am asking because navigation transitions is one of the key features that's a "production blocker" right now.
While I know Compose is not production ready yet, I am still unsure if this is the right time for new projects to be "compose first".

[Colton Idle]

@Doris Liu my team is mostly looking for those 4 transition types we get from material motion. In addition to that, simple page transitions like slide up from bottom. Slide in from right (to show you're selling down into a flow), etc.

[Ian Lake]

Support for transitions in Navigation Compose are planned to be part of the first stable release of Navigation Compose, yes

[Ian Lake]

What we can do in Navigation Compose will be dependent on the underlying Compose transition APIs though, so keep that in mind when thinking about things that aren't currently possible in Compose (such as shared elements). The goal is for the API we build to be future proof so that as the underlying Compose transition API gain new abilities, you get that support 'for free' in Navigation Compose

[Doris Liu]

This type of transition support is what I'm currently working on. So it's definitely my highest priority. 🙂 Though it's a fairly complex problem, and we want to provide a (hopefully) elegant solution in both animation and navigation. As @Ian Lake pointed out, it's important that we build a solid underlying Compose transition API to support future use cases. That's why I'd love to see the use cases you are looking to support. 😄

[Sam]

@Ian Lake @Doris Liu will there be a way to customize the transition? We’re fine without shared elements support, instead getting the initial position of the starting element ourselves and then manually directing all the element animations accordingly. The ability to orchestrate both the start screen and end screen simultaneously would require some hooks/callbacks from the nav lib though

[Ian Lake]

Yep, the hooks to provide exactly the transition you need is exactly the API that we're figuring out 🙂

[Ian Lake]

With some defaults that are better than jump cuts lol

[Doris Liu]

Yep, the defaults will likely be the same as what's offered in AnimatedVisibility . So if there are other types of defaults you'd like to see, please let me know.

[Sam]

Nice! Navigation transitions are a notoriously difficult challenge, I’ve watched many libraries fall short in React Native and iOS, so I admire you both for taking this on

[Ian Lake]

No pressure Doris

[Shakil Karim]

I hope Compose Navigation will support parallax + slide in Animation like IOS have. it would be super cool

[Doris Liu]

Maybe we should start a thread to collect the use cases that you all want to see. Can't promise they will be supported, but they will be definitely all considered. 😄

[alexandrepiveteau]

Just piggybacking on this thread to show a transition use case I had (if it’s relevant).

I ended up using a mix WithConstraints { … } (this was done around alpha06) and .offsetPx(…) modifiers to move the stickies around, creating a composable which could transition between these two states, rather than having two separate destinations / composables.

stickies-transition-example.MOV

[Doris Liu]

Thanks for sharing @alexandrepiveteau. It seems to me for a seamless transition like this, it's the best to reuse that same composable. The alternative would require swapping content before/after/during the animation, which usually leads to some visual artifacts. These artifacts are especially noticeable if the target position changes, e.g. when user starts scrolling during the animation.
This is an awesome use case for our shared element exploration. 🙂