loading code fetching the highlighted snippet
FIG-001/ LAYOUT
the tab bar jumps, the underline glides.
Selecting Lettuce opens a sidebar, so the centred tab bar jumps left in the same update as the shared layoutId underline moves. The list is a layoutRoot: the underline animates relative to it and slides exactly one tab. Turn the root off and it flies in from where Tomato used to be.
- The sidebar and the selection change in one update, so the list moves 110px left at the same moment the underline changes tab.
-
layoutRootmakes the list's own layout change instant and animates the underline relative to it, because the previous underline was inside the list too. -
layoutRootis read when the list mounts; the toggle remounts it with{#key}.
category · layout
sheet · sheet 01 / 02
⟳ to re-run
FIG-002/ LAYOUT
a resizing parent, a child that stays centred.
The parent grows and shrinks over one second; the child's own layout animation starts half a second later. Until then it only follows its parent. Anchored at { x: 0.5, y: 0.5 } it never leaves the centre; with the default top-left anchor it drifts.
-
layoutAnchor={{ x: 0.5, y: 0.5 }}measures the child's position from the parent's centre, so a flexbox-centred child stays centred while the parent resizes. - The default anchor is the parent's top-left corner: the child keeps its offset from that corner and drifts off centre.
-
layoutAnchor={false}turns relative projection off: the child animates in page space on its own.
category · layout
sheet · sheet 02 / 02
⟳ to re-run