Morphing Ui transitions made simple
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.babelrc Initial commit Feb 7, 2018
.eslintignore Initial commit Feb 7, 2018
.eslintrc Initial commit Feb 7, 2018
.gitignore Initial commit Feb 7, 2018
.npmignore Initial commit Feb 7, 2018
package-lock.json 0.3.6 Jul 23, 2018
package.json 0.3.6 Jul 23, 2018

React Morph ️🦋

Morphing UI transitions made simple

npm version size

Preview Gif

Usage 🐛

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

Simple Example

  1. Create two states as you normally would (HTML + CSS).
  2. Wrap both in one <ReactMorph>
  3. Label the elements you wanna morph with from("a-key") and to("a-key")
  4. Perform the magic with go(0) or go(1)
import React from "react";
import ReactMorph from "react-morph";
  {({ from, to, fadeIn, go }) => (
      <a onClick={() => go(1)}>
        <strong {...from("title")}>ReactMorph 🐛</strong>
        <br />
        <p {...from("description")}>Morphing transitions was never so easy!</p>

        <h1 {"title")}>ReactMorph 🦋</h1>
        <br />
        <h2 {"description")}>Morphing transitions was never so easy!</h2>

        <a onClick={() => go(0)} {...fadeIn()}>

Features 🌟

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

Keep in mind


  • You need to remove extra whitespace, to match the real element's width, the solution is display: inline-block or a wrapping element to the content.
  • Margins are always tricky because they create extra white space. You can either wrap the content in another element and animate it or be sure to match both the margins in both states.
  • Sometimes it's necessary to create a placeholder element for the transition to avoid child distortion.
  • List items could be miscalculated; a simple solution is: list-style: none;.
  • Sometimes you need extra layers instead of nested children.
  • Avoid animating both the parent and children to avoid unpredicted results.

Live Demos


Edit j2rjln010w


Warning wip

  • Add a styled-components example
  • Recalculate positions on window resize
  • ? Optional portal for the second state ?