Page transition
Key-driven view transition wrapper with overlapping slide, crossfade and ink curtain wipe variants, plus shared-element morphs; reduced motion gets a short crossfade.
Preview
Transition
Projects · choose Pebble to morph
Pebble notes6 of 9 tasks
Billing revamp3 of 18 tasks
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| transitionKey | string | — | PageTransition: change it (route, tab, step) to run a transition. |
| variant | "slide" | "fade" | "curtain" | "slide" | PageTransition: overlapping slide, plain crossfade, or ink curtain wipe. |
| direction | 1 | -1 | 1 | PageTransition: forward or back, sets which side views slide from. |
| id | string | — | SharedElement: same id on both views morphs one into the other. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.