Jetpack Compose Animations
A growing catalog of self contained Jetpack Compose animation examples by skydoves. Every entry is a single composable file you can read end to end, with the constants you can tweak and a written walkthrough of how the motion is built.
Try Compose HotSwanAnimate Content Size
Expandable card that morphs height between two Dp values via animateDpAsState with a tween spec.
Animated Visibility
Enter and exit transitions composed from slideIn, fadeIn, scaleIn. The spec defines the choreography.
Color State Morph
animateColorAsState walking through a palette of theme colors. Pick a swatch, the background and accents follow.
FAB Spring Morph
A floating action button that grows, rotates, and shifts color through animateAsState with spring physics.
Animated Counter
A number counter that slides and fades between values using AnimatedContent. Direction follows whether the count went up or down.
Crossfade Switcher
Crossfade between three selectable panels. The animation spec controls how snappy or lazy the swap feels.
Pulsing Heart
rememberInfiniteTransition driving scale and alpha at the same time. The result is a soft heartbeat with a bright on, dim off rhythm.
Custom Loading Spinner
A loading indicator built from infinite rotation plus a color sweep. Two infinite transitions layered on the same graphicsLayer.
Spring Drag Box
A box you can drag with pointerInput, then release to spring back to origin via Animatable.animateTo.
Easing Showcase
Six runners race side by side, each using a different Easing. Linear, ease in, ease out, fast out slow in, anticipate, overshoot, side by side.
Play / Pause Morph
A play triangle that morphs into a pause pair through Path interpolation on a Canvas. The shape itself is the animation.
Shared Bounds Expansion
Tap a card and watch it expand into a detail view through SharedTransitionLayout. Matching keys tie source and destination bounds together.
Swipeable Cards
A Tinder style card stack. Drag past the threshold and the card flings off, tilted by a rotation factor proportional to the offset.
Radial FAB Menu
A floating action button that explodes into satellite buttons along an arc. Per index stagger delays unfurl and refold the menu.
3D Card Flip
A card that flips in 3D using graphicsLayer.rotationY with a tuned cameraDistance. Front and back swap content at 90 degrees.
Confetti Burst
Tap anywhere and a one shot burst of rotating paper rectangles erupts. Each piece carries its own velocity, rotation speed, lateral wobble, lifetime, and color.
Wave Field
Multiple sine wave layers stacked for parallax, each driven by its own phase, frequency, and amplitude ramps.
Metaball Liquid
Drifting blobs that fuse into a single liquid mass when they overlap. The fusion comes from additive blend on stacked radial gradients.
Mesh Aurora
Color orbs orbit on elliptical paths, additive blended into a living mesh gradient. Hue rotation cycles the entire palette over time.
Pendulum Wave
N pendulums with progressively shorter periods. They start in phase, drift apart into apparent chaos, and resync at the period boundary.
Rainy
Continuous rain streaks falling at an angle, with depth based parallax and optional ground splash marks.