Morph

• Keep your screen transition. While the transition runs, the moving element is drawn in a layer above both screens, so a fade, a slide or an instant switch cannot clip, cover or drag it.
• The starting box is measured where you last saw it. The two elements never cross-fade: the old one is held at its exit end style, and the ghost is a copy of what was on screen (crossFade).
• The element returns to your tree exactly as it was. border-radius is interpolated between the values you set on each of the two elements.
• On a pop, the element that moves is the one on the screen you return to. That is the inactive side, because active follows the stack, not the direction of navigation.
• Give both elements the same children. Anything the element on the new screen does not contain cannot be carried across.
• The element leaves its screen when the transition starts and returns when it ends, so a scroll container, an opaque new screen or a sliding transition cannot get in the way.
• While the transition runs, the element is drawn above shared bars, tab bars and decorator dims. Its layer sits above every screen container, nothing inside a screen can be drawn above it, and there is currently no way to prevent this.
• A morph belongs to the Router of its enclosing Screen and pairs only during that Router's transitions. Inside a nested Router it moves within that Router's box. See Putting it together.
• A <Part> inside a growing Morph is laid out once at its normal width, the width it has outside a transition. As the Morph grows, the Part is clipped instead of re-wrapping.
• as renders another tag (default div). Props stay typed as a div's. Do not render a structural tag such as li or td with it; put the Morph inside the li or td instead.
• A name with nothing registered under it animates nothing and warns once in development.

• If a card and its artwork moved on their own curves, the card would come apart mid-transition and the artwork would drift out of its box. The eye follows the container as one unit.
• The text preset uses no ghost: a heading and the label it came from are the same words at two sizes.
• Every morph interpolates font size, so the text is laid out again at each size rather than scaled as a bitmap.
• Ordinary text inside a container Morph is drawn twice: the ghost fades the old screen's letters over the new screen's letters, and the text visibly doubles or blurs.
• A nested Morph grows with its container's timing. Its own duration is not used.
• A non-replaced inline box can receive a computed translate without its line box moving, so the words show at the destination first. A block or inline-block box fixes that, and a wrapper with a fixed height keeps the surrounding layout from collapsing while the text is moving.
• A Morph stands for one element shared by both screens. Copy that differs between the screens (an eyebrow, a summary, controls) belongs in a Part beside it, which changes on each screen.
• Do not wrap the text Morph in that fading Part. Fading its parent would fade the letters that must stay visible.

• Duration: the morph's own enter duration if set, else the running screen transition's duration, else 0.4s when the screen transition is none.
• Easing: the morph's own, except while the screen itself moves. Then it uses the screen's easing, because the destination moves with that screen.
• The presets set no duration on purpose, so a morph ends with its screen under any transition. They do set a curve, [0.4, 0, 0.2, 1], because borrowing a fade's front-loaded curve would make the element jump across and then sit still.
• A morph with no duration of its own ends on the same frame as its screen.

A container that grows to fill the viewport is the same feature with a bigger box. What happens behind it is up to the screen transition. Let the previous screen follow the element out (for example exit: { scale: 1.08, filter: "blur(10px)" } in a createTransition) and leave the new screen transparent so the previous one shows through.

Reading active as "the side that moves" pairs morphs backwards on every pop. The moving side always starts at initial, and the side being left always starts at rest.

createRawMorphTransition takes initial, idle, pushOnEnter, pushOnExit, replaceOnEnter, replaceOnExit, popOnEnter, popOnExit and options. popOnEnter fills POPPING-false, the returning element that moves. popOnExit fills POPPING-true. Rest variants stay idle, because a pair exists only while a transition runs.

• initial: { opacity: 0 } makes the new element start as a cross-fade. Nothing is scaled, so radius needs no correction.
• crossFade: the new element stays opaque under the ghost. Fading both would let the background show through by a(1 - a), a brightness dip of up to 25% halfway through, which is why the presets' initial is {}.
• crossFade: paired descendants are already hidden in the ghost, so it only holds content with no counterpart. With 0, that content looks clipped instead of fading out.
• radius is animated with the content, never with the geometry, so the geometry keyframes stay on the compositor.
• carry: "screen" zooms the screen on which the element is small: the previous screen on a push, the screen you return to on a pop. Every other card moves as if the view zoomed in on the tapped one.