Just release this Jetpack Compose animation playgr...

# feed

[maximus]

Just release this Jetpack Compose animation playground: https://github.com/nomanr/animate-compose

• 90+ animation presets
• Live playground to tweak and test animations
• Supports Android and Compose Multiplatform.

Open to feedback or ideas for new animations.

[maximus]

An example of working with the Playground. Adding scale to key frames from (1->2 and 2->1).

demo.mp4

[Stefan Oltmann]

Very nice work!

I know some people on the team who will love this. 😄

[Konstantin Tskhovrebov]

seems wrong. I expected a movement + rotation at the begining

Screen Recording 2025-06-10 at 16.44.30.mov

[maximus]

can you show translations and rotation properties?

also, the second keyframe’s X is set to 0 - that’s why it jumps to 0 position.

[maximus]

Or easy, can copy the code and share it here 😅

[Konstantin Tskhovrebov]

I simple edited a default playground sample: made the second animation's start earlier

[Konstantin Tskhovrebov]

import androidx.compose.runtime.Composable
import androidx.compose.runtime.State
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.TransformOrigin
import com.nomanr.animate.compose.core.AnimationPreset
import com.nomanr.animate.compose.core.Keyframe
import com.nomanr.animate.compose.core.TransformProperties
import com.nomanr.animate.compose.core.animateKeyframe

class UntitledPreset : AnimationPreset {

    private val keyframes = listOf(
        Keyframe.Segment(
            start = 0f,
            end = 0.3f,
            from = TransformProperties(
                translationX = -700f,
                alpha = 0f
            ),
            to = TransformProperties(
                translationX = 0f,
                alpha = 1f
            )),
        Keyframe.Segment(
            start = 0.12931977212429047f,
            end = 0.7000000476837158f,
            from = TransformProperties(
                translationX = 0f,
                rotationY = 0f,
                alpha = 1f
            ),
            to = TransformProperties(
                translationX = 0f,
                rotationY = 360f,
                alpha = 1f
            )),
        Keyframe.Segment(
            start = 0.7f,
            end = 1f,
            from = TransformProperties(
                translationX = 0f,
                alpha = 1f
            ),
            to = TransformProperties(
                translationX = 700f,
                alpha = 0f
            ))
    )

    @Composable
    override fun animate(progress: State<Float>): Modifier =
        Modifier.animateKeyframe(
            progress = progress,
            keyframes = keyframes,
            transformOrigin = TransformOrigin.Center
        )
}

[maximus]

Thanks for sharing. It works as expected. Since the second animation starts at 0.12s, the object jumps to the middle when the second keyframe begins because X is 0, then rotates.

[Konstantin Tskhovrebov]

thanks for the explanation. it's a bit confusing when you edit it through the UI

[maximus]

It definitely is. Takes a bit time getting used to.