React Morph ️🦋

Morphing UI transitions made simple

Magically animates one element into another just by tagging the first and last state.

Getting Started 🐛

npm install react-morph
# or
yarn add react-morph

Import the useMorph hook.

const morph = useMorph(options);

Then spread the props to the elements you want to morph.

<img {...morph} src="larva.png" width="50">

<img {...morph} src="butterfly.png" width="80">

Make sure you have just ONE element rendered at same time.

Simple Example 🦋

1. Create two states as you normally would (HTML + CSS).
2. Call useMorph hook.
3. Spread the elements you want to morph with {...morph}
4. Add and remove the element from the DOM

import React from 'react';
import { useMorph } from 'react-morph';

() => {
  // Handle toggle state as you normally would.
  const [toggle, setToggle] = useState(true);
  const morph = useMorph();

  return (
    <div>
      <button onClick={() => setToggle(!toggle)}>Let's morph!</button>
      <br />

      {toggle ? (
        <img {...morph} src={larva} width="30" />
      ) : (
        <img {...morph} src={butterfly} width="80" />
      )}
    </div>
  );
};

Documentation

Please check the documentation.

Features 🌟

• Simplicity
• No hardcoded absolute positions
• All GPU accelerated props
• No layout or paint browser rendering

Live Demos

• Hello world
• Apple App Store