loading code fetching the highlighted snippet
FIG-001/ LAYOUT
shuffling list items.
Four coloured tiles shuffle their order every second. Each tile carries layout — motion measures the rect before + after the array mutation, then springs each tile between positions.
- The list keys on
backgroundColor— Svelte tracks the same item across re-renders even when its index changes, so motion sees a position change instead of an unmount + remount and can FLIP it. - Each
motion.lihaslayouton it. Motion samples each item's rect before and after the array mutation; the difference becomes the FLIP delta, and the configured spring carries the tile to its new spot. - Shuffle fires from a
setTimeoutinonMount, recursing viascheduleNextShuffle()so a single source schedules every cycle.onMount's cleanup clears the pending timeout — important when the component unmounts mid-flight.
category · layout
sheet · sheet 01 / 01
⟳ to re-run