See how morph preserves DOM state while swap innerHTML destroys it
morphswapstate preservation
Demo 1: Draggable Position Preservation
Try it: Drag both boxes to new positions, then click the update buttons.
Watch how morph keeps the position while innerHTML resets it.
Morph preserves state
Drag me!
Not yet updated
Timestamp changes, but box position stays!
innerHTML loses state
Drag me!
Not yet updated
Timestamp changes AND box resets to corner!
Demo 2: Video Playback State
Try it: Play both videos and seek to around 5 seconds, then click update.
Morph keeps the video playing at the same position; innerHTML resets to the beginning.
Morph preserves state
Not yet updated
Current time: 0.00s
Timestamp changes, but video keeps playing!
innerHTML loses state
Not yet updated
Current time: 0.00s
Timestamp changes AND video resets to 0:00!
Demo 3: Form Input Values
Try it: Change the values in both forms (edit text, select a color, add notes),
then click update. Morph keeps your changes; innerHTML resets to default values.