Component registry

Pop motion

The shared small-scale entrance for a menu or affordance.

All components · Kit documents · Definition as JSON

Live web demo

Web source: openvibe-shared/navbar · OpenVibeNavbar.pop

Anatomy

  • objectappearing surface
  • originactivation point

Props

open
boolean

Behavior and accessibility

States
closed · open
Tokens
--ov-dur-2 · --ov-ease-spring
Keyboard
Standard focus order
Outside tap
No dismissal
Scroll lock
Page remains scrollable
Reduced motion
Crossfade without scale.
Accessibility
Pop motion. Visible keyboard focus; follow reading order. At least 44 × 44 dp or pt for every touch action.

Android · Jetpack Compose

Animate scale and alpha with the spring token; reduced motion uses alpha only.

Material 3 container: Surface

iOS · SwiftUI

Use scale and opacity with the spring token; reduced motion uses opacity only.

Example definition

{
  "schema": "design.component@1",
  "name": "pop-motion",
  "props": {
    "open": true
  }
}

Other components