compose-animations

Jetpack Compose animation causes recomposition when animation-driven state reads occur in the composition phase. Moving these state reads into the layout or drawing phase using graphicsLayer lambda overloads prevents the excessive recomposition and frame jank.

To animate Jetpack Compose graphicsLayer without recomposition, use the lambda overload of the modifier. Reading the animated state inside the graphicsLayer lambda defers the read to the drawing phase, skipping composition and layout entirely for smooth performance.

Use Animatable with LaunchedEffect for coroutine-driven animation sequences, and use updateTransition for synchronized multi-property state transitions. Choosing the correct API based on interaction structure ensures optimal phase placement and avoids unnecessary recomposition.

Yes, this animation approach applies CMP-safe API usage across commonMain and supported targets. It ensures phase-optimal animation placement using graphicsLayer lambda overloads and correct animated sizing modifier ordering without breaking multiplatform compatibility.

The best way to profile Jetpack Compose animation performance is using release and benchmark builds. Checking compiler reports identifies instability-related issues, ensuring that phase-optimal state reads and mandatory animation labels are correctly applied to eliminate jank.

Fix frame jank in AnimatedVisibility and AnimatedContent by enforcing phase-optimal state placement. Moving animation state reads to the drawing phase via graphicsLayer lambda overloads and applying correct modifier ordering prevents recomposition during content transitions.