A dock icon that falls under real gravity and squashes on impact
Get in touch for more detailsEvery frame is driven off a single CADisplayLink, synced to the screen's refresh (up to 120 Hz on ProMotion). The icon's motion isn't a baked bezier curve. On each tick I recompute its position straight from the equations, with implicit animations switched off so nothing smears the values the physics produces.
The drop is a real projectile. A small upward pop gives it a launch velocity, then constant gravity takes over while a matched horizontal velocity carries it sideways, timed so it arcs in and reaches the dock's x exactly as it reaches the dock's y. I solve the flight time from the fall itself, so the icon lands in the slot rather than being tweened toward it. Gravity is tuned in screen units rather than the real-world 9.8, which would crawl at pixel scale.
v₀ = √(2gh) // launch velocity from the upward pop
y = y₀ − v₀t + ½gt² // vertical position over time (constant gravity) The squish falls out of the same math. When the icon lands I read its impact velocity, the speed it's genuinely moving at the instant of contact, and scale the compression from that. A longer drop builds more speed, hits harder, and squashes deeper, and only from the vertical drop (sideways motion doesn't slam it into the floor). The squash itself is a pulse, not a snap: compression builds from zero at contact, peaks a beat later, then eases back, pinned to the icon's bottom edge so it flattens onto the dock instead of shrinking from its center, exactly how a real object meeting a surface would behave.
v_impact = √(v₀² + 2gΔy) // speed at the instant of contact (Δy = drop height)