Bounce
Drop the layer and let it bounce to rest. Real gravity, no keyframes.
Bounce drops the layer by a set distance and bounces it, each arc lower than the last, until it settles. Two sliders replace a dozen carefully-eased keyframes.
It is solved in closed form rather than simulated, so it is exact at any frame rate and free to scrub — jumping to the end costs the same as playing to it.
When to reach for it#
- Logos, badges and icons dropping into place.
- List items landing one after another — use Stagger on an instanced layer.
- Any entrance that should feel like it has weight.
How it works#
The fall is one parabola. Each bounce is another, with the impact speed multiplied by Bounciness. The arcs shorten geometrically, so the total settling time converges and the layer genuinely comes to rest rather than jittering forever.
The value is added to whatever the property already is, so at time zero the layer sits exactly where you put it and the drop starts from there. Point it at X for a horizontal roll instead.
Parameters#
How far it falls, in pixels. This is also where it ends up: the layer finishes Drop pixels below where you placed it, so place it at the top of the fall.
Acceleration in pixels per second squared. Higher is a faster, snappier drop. 2000 lands a 300 px fall in about half a second.
How much speed survives each impact. 0 lands dead. 0.55 gives three or four readable bounces. Above 0.8 it bounces for a long time, which is rarely what a UI wants.
Seconds before the drop begins. On an instanced layer, use Stagger instead — it delays each clone by its index automatically.
See also#
Something here wrong or missing? Tell us in the community.