Popover

Full motion specification

How the movement works

Use it for a short setting or confirmation that belongs right next to the button that opened it.

1. 014.5 s cycle on a 542×191 card. An outlined blue "Details" button (108×36) at (24, 112); the cursor clicks it at 1.0 s.
2. 02Show amount a: 0→1 over 1.0–1.28 s with easeOutCubic; opacity a, sliding 6 px in from the right.
3. 03Panel: white 300×120, radius 10, at (156, 62), 1 px border, shadow blur 22, offset y 6. A 10-wide triangle on its left edge (y 122–138) points at the button.
4. 04Inside: a bold title bar, two text lines, an outlined 70×26 button and a blue 72×26 OK button.
5. 05Close: the cursor moves to OK (402, 157) by 3.0 s and clicks at 3.3 s; a is multiplied by (1 − easeInOutCubic over 3.3–3.5 s).