Quick start

Wrap the part that changesCopy Anchor Link

Put Remold.Morph around the content and give it a trigger: any value that changes when the content does. Render your content as you normally would.

import { Remold } from "@remold-ui/react";

function Files({ files, sort, kind }) {
  return (
    <Remold.Morph trigger={`${sort}:${kind}`}>
      {files.map((file) => (
        <Row key={file.name} file={file} />
      ))}
    </Remold.Morph>
  );
}

React's key is still there for React's own reasons. Remold doesn't read it: it would animate the same if the rows were rebuilt from scratch. Without React, transition takes the element and a function that changes it: innerHTML, a template, or another framework's render.

Animate from an event handlerCopy Anchor Link

When there's no single value to watch, use useRemold and wrap the state change.

const { ref, animate } = useRemold();

<ul ref={ref}>{items.map(renderItem)}</ul>
<button onClick={() => animate(() => setItems(shuffle(items)))}>Shuffle</button>

Change text in placeCopy Anchor Link

<Remold.Text>{status}</Remold.Text>

Letters the old and new text share stay and slide into place; the rest fade in and out. See Text.

Next stepsCopy Anchor Link

• How matching works, and how to steer it.
• Springs: choosing how things move.
• Accessibility: reduced motion, announcements and focus.