Hi guys can you guide me on how can I achieve this...

# compose

[Ch8n]

Hi guys can you guide me on how can I achieve this behavior? the purple color moves down and it does the color of the text changes from white to purple?

[joakim]

Overlay two texts, animate a clip on the top one? I'm just making assumptions here but that's what I would try first

[Nader Jawad]

You can try something like the following. Effectively we are drawing the text into an offscreen buffer and using BlendMode.Xor to determine the appropriate pixel color. There is another thread from @Albert Chang that asks a similar question:

// Configure alpha to almost 1 but not quite 1 to force graphics layer into
    // offscreen composition to ensure XOR blends against transparent pixels
    // otherwise the contents are drawn directly.
    val textColor = Color.Blue
    Box(Modifier.fillMaxWidth().wrapContentHeight().graphicsLayer(alpha = 0.99f).drawWithContent {
        drawContent()
        drawRect(
            textColor,
            topLeft = Offset(0f, size.height / 2),
            size = Size(size.width, size.height / 2),
            blendMode = BlendMode.Xor
        )
    }) {
        Text(
            "Hello World",
            textAlign = TextAlign.Center,
            fontSize = 50.sp,
            color = textColor
        )
    }

[Nader Jawad]

This sample code generates the following output

[Colton Idle]

Funny how the letters line up perfectly but it gives you that looking at something in a glass cup of water look.

[Nader Jawad]

@Can, this thread seems to ask a similar question to the one you had posed in the other thread. Can you try this sample source?

[Can]

Will do, thank you

[Can]

btw @Nader Jawad here you use the same trick i used ("graphicsLayer(alpha = 0.99f)")

[Can]

whereas @romainguy meant this shouldnt be needed

[Can]

of course you are more explicit by creating a layer with the alpha

[Nader Jawad]

Right now we don't expose a direct way to force layer rasterization so we use the alpha trick to do so as a side effect

[Nader Jawad]

In the future there will be a flag similar to useCompostingLayer that can be configured on the graphics layer to do this without having to manipulate alpha to do so

[Can]

Oh, okay - thanks a bunch

[Nader Jawad]

@Shalaga44 this looks like a similar effect to what you are trying to achieve.