split
Two edges part from the centre.
The full recording — the example app on an Android
emulator and an iOS simulator at once, with split played several times
over. Scrub or pause with the controls.
The same edge as slide, but two of them, parting from the centre — the old screen retreats to both opposite edges at once.
Options it takes
| Option | Type | Default | What it does here |
|---|---|---|---|
direction |
'top' | 'bottom' | 'left' | 'right' |
'bottom' |
Both edges are used, so this picks the axis rather than an edge: top/bottom work horizontally, left/right vertically.
|
angleDeg |
number |
0 |
Tilt of the boundary line. The sweep still travels along direction; the line doing the sweeping is raked over. Positive is clockwise on screen. Any value is accepted and wrapped. |
durationMs |
number |
650 |
Animation length. Clamped up to this kind’s floor; 0 means no animation and is never clamped. |
settleFrames |
number |
2 |
Display frames to hold the snapshot before revealing, so the theme swap has painted underneath. |
Ignored by this kind: origin, shape, blurStyle, bands. Passing them is harmless.
Minimum duration
A request below 260ms is clamped up to it, natively, so both
platforms agree. Below that floor a full-screen copy coming apart has too few frames to
read as motion — the eye gets the start and the end and nothing in between, which looks
like a flicker rather than a fast transition. durationMs: 0 still means “no
animation” and is never clamped.
Usage
withThemeTransition(applyTheme, {
kind: 'split',
durationMs: 650,
direction: 'bottom',
angleDeg: 0,
});
How it is done
| iOS | two animated half-planes |
|---|---|
| Android | Canvas.clipPath over both |