I'm trying to animate things using a transition as following, but it snaps between the two endpoints...

# compose

[andbapps]

I'm trying to animate things using a transition as following, but it snaps between the two endpoints immediately without animating any of the intermediate values. Is there something about this that I'm missing?

@Composable
fun TestAnimation() {
    val moved = state { false }
    val offset = DpPropKey()
    val transition = transitionDefinition<Boolean> {
        state(true) {
            this[offset] = 100.dp
        }
        state(false) {
            this[offset] = 0.dp
        }
        transition {
            offset using tween {
                easing = LinearEasing
                duration = 1000
            }
        }
    }
    Transition(definition = transition, toState = moved.value) { transitionState ->
        println("transitionState[offset] = ${transitionState[offset]}")
        Box(
            modifier = Modifier
                .clickable(onClick = { moved.value = !moved.value })
                .padding(start = transitionState[offset])
                .size(56.dp),
            shape = CircleShape,
            backgroundColor = Color.Blue
        )
    }
}

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

I'm not sure if this is the only problem, but you are creating a new offset key every time TestAnimation is invoked. Either remember it or declare as a top-level val.

[andbapps]

Unfortunately that doesn't fix the issue but that's a good point

[Andrey Kulikov]

you need to do the same with transitionDefinition. wrap it into remember

[andbapps]

Thank you, implementing both of those worked!