61 Animation Composition. 61 of 95.
61/MOTION/61 of 95
Animation Composition
Layer a second animation instead of replacing the idle one.
The problem
An idle float snaps back when you trigger a shake because both animations target the same property and the later one replaces the earlier by default.
The solution
animation-composition: add layers the shake on top of the float so the idle motion continues.
Experiment
Play with the values
6
250ms
10px
How it works
- An idle float is already running on the element's transform.
- A shake is a second animation triggered by the user, not a replacement for the idle motion.
- The default composition replaces the float, so the idle motion stops for the shake.
- Additive composition layers the shake on top of the float.
- The idle motion continues underneath, and the shake reads as a response rather than a different object.
Seen in
Idle CTA buttons
A floating invite button can still pulse or shake on hover without restarting the float.
Game HUD
Bobbing icons accept hit feedback without dropping their ambient motion.
Empty states
Illustrations keep drifting while reacting to taps.
Presence indicators
Avatars that gently float can still acknowledge clicks.