How matching works
How Remold decides which element became which, and how to steer it.
The four steps
- Read the page. Before the update, every element that has its own text, an image or a visible box is measured: its kind, text, media, size, position and colour. After the update, the same is read again.
- Score every pair. Each old element is compared with each new one. Same text scores high, a similar image or size scores a little, and an element whose parent was already paired gets a bonus.
- Pick partners. The best overall pairing is chosen at once (with the Hungarian algorithm), so one strong pair is given up when that lets two others do better. Weak pairs are left unmatched rather than guessed.
- Move. Paired elements spring from their old box to their new one. Unmatched new elements fade in; unmatched old ones fade out from where they were.
Text that splits into several elements, or several that merge into one ("3 items" becoming "3" and "items"), is detected too.
Steering it
Pass match to Morph, useRemold or transition().
Prop
Type
Leaving things out
Wrap anything that shouldn't move, such as a video or a live chart, in Ignore, or add a data-rm-ignore attribute. It and everything inside it is skipped.
<Remold.Ignore>
<VideoPlayer />
</Remold.Ignore>To see what was paired, add a style for
[data-rm-matched], [data-rm-entering] and [data-rm-exiting].