React Morph ️🦋

April 25, 2019 · View on GitHub

Morphing UI transitions made simple

npm version

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