Is there way for js transition?

[nevrozza]

Hello! I have started programming with js and faced with a problem: I don't understand how to make transition between screens. I use (kotlin/js).
And second question: How in compose make animation like in ios (чтобы прошлый экран не двигался, и поверх него вылетал новый)

Forgive me for my stupidity...

[arkivanov]

There are 3 kinds of Compose for Web:

1. Compose for HTML - uses js target, renders DOM elements (like React).
2. Compose for Web - uses js target, renders via canvas.
3. Compose for WASM - uses wasm target, renders via canvas.

Transitions are only possible using Compose #2 and #3. Decompose currently only supports #1 and #2, because #3 is still very experimental. So if you want transitions with Decompose you would have to use Compose for Web (#2). Don't forget to use a x.y.z-compose-experimental version of Decompose. See the example of a Compose for Web app here, it basically shares the same UI with other platforms, and all transitions are also shared.

How in compose make animation like in ios

You can check this section in docs. It says "for iOS" but you could reuse it for any platform.

[nevrozza]

So i can't use transitions in #1? (in compose it sets with parameter "animation" in Children)

[arkivanov]

There is nothing provided out of the box. Because Compose for HTML doesn't provide org.jetbrains.compose.foundation package. There is even no such a thing as Modifier in Compose for HTML. You would need to create transitions yourself. Here is a very simple example, but it's far from ideal.

[nevrozza]

Oh, I'm sorry (when I ask second question I was very sleepy). i meant is it possible to add animation between screens in js without compose? (react, mui.Material)

[arkivanov]

is it possible to add animation between screens in js without compose?

Decompose exposes the entire navigation state as Value. Value - is just an observable state holder. ChildStack contains the entire stack. For navigation with React without transitions, please refer to the sample.

But I can't say anything about transitions, I suggest checking the React docs and searching for answers. Sorry. Maybe someone else here with the relevant experience could comment.

[nevrozza]

Thank you very much for your detailed answers! Good bye!