Hi everyone, I've been looking into `Modifier.animateItemPlacement()` inside a `LazyRow` and I'm won...

# compose

[Abdullah Musa]

Hi everyone, I've been looking into Modifier.animateItemPlacement() inside a LazyRow and I'm wondering how I can customize the animation when swapping two items. I'd like one of the items to animate above the row and the other one below. Is there a way to make this happen? I've tried with keyframes, but I don't know how to get the offsets of the swapping items. Thanks.

[Stylianos Gakis]

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]6?q=animateItem&ss=androidx%2Fplatform%2Fframeworks%2Fsupport
This is the newest API for such lazy list APIs, it supersedes animateItemPlacement().
With that said, I do not see something there which allows you to edit the Z index of the item animating.

[Abdullah Musa]

I should have been more clear. I only want to animate the X and Y axes. The X switches between the two items, and the Y is for some offset to animate one of them above the row and the other below. I don't need to animate the Z axis.

[Stylianos Gakis]

You're right, I can't figure this out either. You can reach for keyframes to do smth like

placementSpec = keyframes {
  durationMillis = X
  IntOffset(..., ...) atFraction 0.0f using ArcMode.ArcBelow
  IntOffset(..., ...) atFraction 0.5f using ArcMode.ArcAbove
  IntOffset(..., ...) atFraction 1f
},

But there is nothing for you to be able to grab the right values to pass to the IntOffset itself.
Nor is there something you can grab in order to know which one should be doing the arc one way, and which one should go the other way

[Stylianos Gakis]

I just for example did this

placementSpec = keyframes {
  this.durationMillis
  durationMillis = 800
  if (index % 2 == 0) {
    IntOffset(0, -400) atFraction 0.0f using ArcMode.ArcAbove
    IntOffset(-200, -200) atFraction 0.5f using ArcMode.ArcBelow
    IntOffset(0, 0) atFraction 1f
  } else {
    IntOffset(0, 400) atFraction 0.0f using ArcMode.ArcBelow
    IntOffset(200, 200) atFraction 0.5f using ArcMode.ArcAbove
    IntOffset(0, 0) atFraction 1f
  }
},

in my hard-coded example. And it "works", only for if you're switching around the items next to each other, and only since I know that the value 400 happens to be exactly the right number since my cards are of this height.

But if you are not operating under such very specific assumptions, I do not know what you can do atm.

Perhaps worth a feature request for this?

flippityflop.mp4

[Abdullah Musa]

Thanks for the help. I think I might be able to make this work.

[Stylianos Gakis]

Just note, I really don't love this implementation, and I just eyeballed the numbers completely for my impl just to see if it would be possible or not.
If you do the same for you, and then you get an animation which is for example changing the 1st item with the 3rd instead of the two next to each other, you'd get a completely broken behavior 😄
Overall for a proper solution I think either we're both missing some API which can do this for us, or there's not something built for it, it has to be one or the other.

[Stylianos Gakis]

https://issuetracker.google.com/issues/355006325

[Stylianos Gakis]

Feel free to add your thoughts in there if I missed something

[Abdullah Musa]

@Stylianos Gakis Nothing to add. You summarized it perfectly.