Hello guys. I'm using jetpack compose to build my app and I want to replicate this type of smooth an...

# compose

[davechuks]

Hello guys.
I'm using jetpack compose to build my app and I want to replicate this type of smooth animation anytime I click on an image on screen. I'm not sure how to go about it.

YouCut_20221123_181548366.mp4

[dewildte]

First of all what helps me to reverse engineer an animation is to slow it down real hard
and then describe in fine detail what I am seeing happen.
I try to describe what is happening using language like:
“X and Y are being offset” and “Shape is transforming from x to y”.

[dewildte]

So here I can already tell that they overlayed a new image on top of the old one.
You can see the new image block out the camera button indicating it’s overlayed on top of it. (probably overlayed over the entire screen)
Then a few values are changing over time.
The image is moving to be centre aligned.
Also its shape, I might guess the corner radii, is translating from 50% to 0%.

[dewildte]

That kind of thing.

[dewildte]

I am trying not to hand you the full solution but instead try to teach you how to think about the problem.

[dewildte]

Give a man a fish and you feed him for a day.

Teach him how to fish and you feed him for life.

[davechuks]

Thank you. But the animation itself isn't the problem. The issue is how to go smoothly from one screen to the next using that animation. The way it looks, the image itself is expanding to fill the screen and then the other parts of the other screen is fading in. In compose, composables are normally clipped by their parent composable so I'm not sure how to expand the image composable to fill the screen without expanding the parent.

[dewildte]

You could put a Box overlay over the entire screen and that is now the exploding image playground?

[dewildte]

It does not need to transition do a different screen

[dewildte]

1. button shrinks out
2. The image overlay is set too visible.
3. The image overlay animates into its final state.
When going back just reverse the steps.

[dewildte]

In fact the animation you displayed is coordinated even worse than that.
Step 1 and 2 are reversed.

[dewildte]

This conversation feels like a Captain Disillusion video.

[davechuks]

The app is more like Twitter. It has a card-style layout with different 'cards' in a lazy column. Some of the cards can contain images. I'm not sure how having a Box at the top level helps me. How do I tell the image overlay where on the screen to start animating from? Or what animation value it should start with (since the images are not the same size)?

[dewildte]

Well you did not explain that at the beginning did you? lol

[dewildte]

You showed us a totally different thing and said: “how do I do this?”

[dewildte]

You might start with LazyListState#layoutInfo?

[davechuks]

The animation is similar. There's an image on screen. Clicking on it expands it into another screen (or the illusion of another screen). I thought solving this one would solve my problem

[dewildte]

LazyListState#layoutInfo contains the sizes and offsets for all visible items in the list.

[dewildte]

That should be all the info you need to start figuring out a solution.

[davechuks]

Here's a sample page of the app. It's for a social media forum. Knowing the size of those topic card won't help me at all.

[dewildte]

Are you even allowed to show that to me?

[dewildte]

Is this a public app?

[davechuks]

Yeah. It's my app.

[dewildte]

k

[dewildte]

If you know where the images are on the screen then you can
position the overlay image over the one you are coming from.

[davechuks]

If I can find a way to switch the frame of the image from clipping to non clipping, I can add the animation to expand it to full screen.

[dewildte]

Do as you please.

[davechuks]

Yes I can. But is there a way to know to precise location on screen?

[dewildte]

I just told you

[dewildte]

LazyListState#layoutInfo

[davechuks]

Alright. I'll try to figure out how to use layoutInfo

[davechuks]

Thank you

[dewildte]

https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyListState

[dewildte]

https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyListLayoutInfo

[dewildte]

And this:
https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyListItemInfo

[davechuks]

Thank you

[Afzal Najam]

It is probably possible to do what Eric mentioned but the short answer is that shared element transition isn’t officially supported in Compose yet.

There are a few Compose-specific shared element transition libraries like this one but I can’t personally vouch for it. https://github.com/mxalbert1996/compose-shared-elements/tree/main

[davechuks]

OK. I'll check it out

[Colton Idle]

Yeah. came here to say that compose shared element transitions would basically solve this for you but AFAIK they are not available yet.

[andrew]

It’s the current priority though, shouldn’t be much longer as the groundwork is in

[Afzal Najam]

Not for SubcomposeLayout unless I missed something

[andrew]

There will likely be a host composable for it

[andrew]

As that's also how it works internally in android, using decorview