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

# compose-desktop

[Stefan Oltmann]

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

[Casey Brooks]

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

[Stefan Oltmann]

Thanks 🙂

[Stefan Oltmann]

The way is correct, but there seems to be an bug that negative and positive values to rotationX result in the same angle. 🤷‍♂️

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

[Stefan Oltmann]

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.

[Stefan Oltmann]

@seb Are you aware of such a problem?

[seb]

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

[Stefan Oltmann]

Sad. I'm pretty confident that my implementation is correct, but Compose is somewhat buggy here. 🤷‍♂️

[Igor Demin]

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.

[Stefan Oltmann]

Thanks for the hint!

[Stefan Oltmann]

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.

[Igor Demin]

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

There is a 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 🙂

[Stefan Oltmann]

Let's see how the issue goes. 🙂