Skip to content
Morphing Ui transitions made simple
TypeScript JavaScript CSS Shell
Branch: master
Clone or download

Latest commit

Latest commit f277f63 Jul 20, 2019

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docz Add types for useMorphKeys Apr 26, 2019
examples Add docs and remove legacy examples Apr 25, 2019
lib Update lib Apr 26, 2019
src Add types for useMorphKeys Apr 26, 2019
.babelrc Add curves support and docs Apr 11, 2019
.editorconfig Initial commit Feb 7, 2018
.eslintignore Initial commit Feb 7, 2018
.eslintrc Add curves support and docs Apr 11, 2019
.gitignore Bump version to 0.4.0 Apr 25, 2019
.npmignore Bump version Apr 18, 2019
.prettierrc Add curves support and docs Apr 11, 2019
README.md Update readme image Apr 25, 2019
package-lock.json Update docz location Apr 18, 2019
package.json Add deploy docs script Apr 25, 2019
tsconfig.json Update docz location Apr 18, 2019

README.md

React Morph ️🦋

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

You can’t perform that action at this time.