I’m facing some issues trying to do this kind of f...

# compose

[estevanfick]

I’m facing some issues trying to do this kind of flip animation. I’m using graphicsLayer to flip the card component and it’s working. But the problem is with the content, I dont know how to sync the both sides with the flip. Any tips?

[Zach Klippenstein (he/him) [MOD]]

What do you mean sync both sides? Is there some issue in that gif? Looks fine to me

[estevanfick]

The gif is just a sample from internet…
Inside the card component, I tried to put the content of both side controlled by a rotated variable:

if (!rotated) 
CreditCardFront(...)
else
CreditCardBack(...)

but, when I change the rotate value, it draws the compose, and after, do the animations. I dont know how to sincronize the animation with the composable…

[estevanfick]

https://gist.github.com/estevanfick/f6c0ecaf76c1c10496bed6dd59957fdc

[Colton Idle]

Can you post a gif of what your code snippet currently looks like?

[estevanfick]

[Colton Idle]

That looks good 😄 What's the issue again? Is it that the numbers are flipped?

[pepos]

the card is switched immediately and then the animation happens

[pepos]

each card should do its own rotation, not the parent of the two

[pepos]

you do half of the rotation in the visible one and set visibility to false once the half of the rotation is done and the other way around with the one that will appear

[pepos]

Card(Modifier
.graphicsLayer(rotationY = rotation)
.visibility(rotationY > X) {
  CreditCardFront()
}

Card(Modifier
.graphicsLayer(rotationY = rotation)
.visibility(rotationY < X) {
  CreditCardBack()
}

you get the idea with this pseudocode

[pepos]

dont use rotated variable to render your UI, just to trigger the animation, and base the rest of the UI rendering only on rotationY varible

[Zach Klippenstein (he/him) [MOD]]

You could also only compose the side you're showing:

Card(Modifier.graphicsLayer(rotationY = rotation)) {
  if (rotationY > X) {
    CreditCardFront()
  } else {
    CreditCardBack()
  }
}

[pepos]

yeah, that is better

[estevanfick]

it works…

if (rotation < 90F) {
    CreditCardFront()
} else {
    CreditCardBack()
}

and then

fun CreditCardBack() {
        Column(
            modifier = Modifier.graphicsLayer {
    rotationY = 180F
....
}

thanks a lot, I updated the gist

[pepos]

looks great!

[Zach Klippenstein (he/him) [MOD]]

one other tip, if you weren't already aware: you can change the cameraDistance to control kind of how intense that perspective effect is. Docs here.