A modern programming language that makes developers happier.

kotlinlang

I want to create an Apple TV like hover effect.
Does someone know how I can do that?

This is a sample in CSS:
<https://codepen.io/iremlopsum/pen/WzKBpE>

`Modifier.graphicsLayer()` includes a `rotationZ` property, so i'd think combining that with `Modifier.pointerMoveFilter(onMove = { ... })` and a bit of math should get you pretty close

The way is correct, but there seems to be an bug that negative and positive values to `rotationX`  result in the same angle. :man-shrugging:

Other than that I think I'm pretty close to a solution.

```        val offset = remember { mutableStateOf(Offset.Zero) }
        val size = remember { mutableStateOf(IntSize.Zero) }

        val rotationX = if (offset.value == Offset.Zero)
            0f
        else
            ((offset.value.y / size.value.height) - 0.5f) * 90

        val rotationY = if (offset.value == Offset.Zero)
            0f
        else
            ((offset.value.x / size.value.width) - 0.5f) * 90

        Box(
            modifier = Modifier
                .graphicsLayer(
                    rotationX = rotationX,
                    rotationY = rotationY
                )
                .pointerMoveFilter(
                    onExit = {
                        offset.value = Offset.Zero
                        return@pointerMoveFilter true
                    },
                    onMove = {
                        offset.value = it
                        return@pointerMoveFilter true
                    }
                )
                .onSizeChanged {
                    size.value = it
                }
        ) {

            // The content
        }
    }
}```
My solution so far.

<@U0B854PM2> Are you aware of such a problem?

No, but then again, I don't work on Compose :upside_down_face:

Sad. I'm pretty confident that my implementation is correct, but Compose is somewhat buggy here. :man-shrugging:

&gt; but there seems to be an bug that negative and positive values to `rotationX`  result in the same angle
rotationX/rotationY currently don't work well:
<https://github.com/JetBrains/compose-jb/issues/12>

Not sure when we will fix it, depends on how important it is to other people in compare to other issues.

Yeah, I agree that there are bigger issues right now.

My boss just asked me if I could achieve this effect he likes so much in Apple TV and I tried my best, but if it's not ready yet we can live without that.

Not sure, but probably, you can achieve what you want, using Skia directly.

There is a <https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/graphics/skiasharp/transforms/3d-rotation|link >in the issue that describe how to rotate with perspective projection. I tried that, but was not successful to achieve the same behavior as in Android rotateX/rotateY. You don't need achieving the same behavior, so it will be easier :slightly_smiling_face:

Let's see how the issue goes. :slightly_smiling_face: