Feedback popover

Six animation lessons applied to a single component

The starting point

Step 1: Spatial origin

transformOrigin: "top left" because the trigger is above-left. Scale from 0.9 (not 0). Exit at 0.95 (asymmetric).

Step 2: Spring physics

Replace the easing curve with a snappy spring. Springs retarget smoothly on rapid toggles instead of restarting.

No bounce. The spring's value is interruptibility, not overshoot.

Step 3: Stagger the content

delayChildren: 0.1 waits for the popover to mostly finish its entrance.

Step 4: Focus management

120ms puts focus transfer at roughly 60% of the spring settle time.

Step 5: Reduced motion

Step 6: Swipe to dismiss on mobile

Both distance (80px) and velocity (500px/s) thresholds matter. Distance alone misses quick flicks. Velocity alone misses slow deliberate drags. dragElastic: 0.3 provides rubber-band resistance.