First of all great work on making animations/trans...

# compose

[enighma]

First of all great work on making animations/transitions happen with navhost @Ian Lake + team

That being said, whenever I try adding my own, they look kind of broken. I have a hard time setting up a nice transition with slideIn fadeIn etc.
Is this a known issue? I.e is the solution to dial in the parameters?

[Doris Liu]

You could use the shared axis transition pattern here as a reference to adjust the animations: https://material.io/design/motion/the-motion-system.html#shared-axis
We'll provide these patterns from material component at some point. 🙂

[enighma]

I do like the look of that, but how does it translate into compose?

[Doris Liu]

In the Specs section, there are timings for fade & slide. You could customize tween to match the spec, and pass the tween to slideIn and fadeIn etc

[Ian Lake]

Motion design is a whole field of study that comes with studying acceleration curves and UX research, etc. Boiling that down into a few more pre-canned animations is definitely something we want to do, so much so that it is already on the public roadmap (part of that "Support Material Transitions" bullet point): chttps://developer.android.com/jetpack/androidx/compose-roadmap

[enighma]

Cool. It sounds like I need to play a bit with the tween values to get it look seamless. Gonna play a bit more with this on my own. Might report back with an animation cooked up.

[Stylianos Gakis]

In the Specs section, there are timings for fade & slide. You could customize tween to match the spec, and pass the tween to slideIn and fadeIn etc

@Doris Liu Kinda wish those specs were written in a different way 😅 When I see for example for Easing: “40% Outgoing Only” I have no idea what this means nor how this translates to a CubicBezierEasing to write myself in code 😅
I wonder, there hasn’t been any official implementations of those in those past 2 years right? I haven’t seen any other message in this slack channel discussing this either.

[Stylianos Gakis]

Aha
“40% Outgoing only” is CubicBezierEasing(0.4f, 0.0f, 1.0f, 1.0f). AKA FastOutLinearInEasing

“Incoming Velocity: 80%” is CubicBezierEasing(0.0f, 0.0f, 0.2f, 1.0f). AKA LinearOutSlowInEasing

I wonder if the specs in https://m2.material.io/design/motion/the-motion-system.html#shared-axis here when you do click on the editor could be shown in a more android-developer friendly way. I don’t know where this “x% incoming/outgoing” way of describing it comes from, but tbh it’s quite confusing.

[Stylianos Gakis]

Also for m3, I can’t find the specs of such https://m3.material.io/styles/motion/transitions/applying-transitions#21bac8cf-880b-4ee5-af84-bd25caa815ea transitions anywhere. I can assume it’s the same as m2, but I must be missing some documentation page right? This interactive graph is invaluable in the m2 docs.

[Doris Liu]

Thanks for the feedback @Stylianos Gakis. I agree the x% incoming/outgoing is confusing. Seems like the wording has been updated? I don't see the "80% incoming only" as shown in your screenshot.

@Chris Sinco [G] might know who could help address the improvements suggested here: 1) link corresponding easing curves for Android, 2) add transition specs for m3, and 3) clarify x% incoming/outgoing in the spec.

[Stylianos Gakis]

Thanks for the response Doris!
My screenshot is for when you specifically click on the yellow “Incoming elements fade in” section of that graph. I will attach some extra screenshots here to hopefully show exactly what I mean.

This is for the web link: https://m2.material.io/design/motion/the-motion-system.html#shared-axis

Under the section “Specs”. You may have missed it as you need to click on an arrow there [fifth picture] to expand this section and get exactly what my screenshots show.

Feel free to let me know if I can help in any other way.

[Chris Sinco [G]]

Yeah, Material Motion System is not as well documented in M3 as it is in M2, primarily because the library parts of the motion system are not built/available for M3. But, the principles still hold the same, and I’ve found reusing the exact interpolator values from the M2 specs work just fine.

[Chris Sinco [G]]

@Gurupreet singh may be able to speak more to the state of the documentation of M3 motion

[Chris Sinco [G]]

I don’t know where this “x% incoming/outgoing” way of describing it comes from, but tbh it’s quite confusing.

I ran into this actually just last week - there’s an old doc still up on the M1 site that shows the specific mapping to Android, which I can confirm works in Compose: https://m1.material.io/motion/duration-easing.html#duration-easing-natural-easing-curves