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