Morphing Ui transitions made simple
Clone or download
Latest commit e2f5d90 Oct 29, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples Add preview gif Oct 29, 2018
lib Fix propType check and undef warning Jul 23, 2018
src Fix propType check and undef warning Jul 23, 2018
.babelrc Initial commit Feb 7, 2018
.editorconfig 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
README.md Add preview gif Oct 29, 2018
package-lock.json 0.3.6 Jul 23, 2018
package.json 0.3.6 Jul 23, 2018

README.md

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";
<ReactMorph>
  {({ from, to, fadeIn, go }) => (
    <div>
      <a onClick={() => go(1)}>
        <strong {...from("title")}>ReactMorph 🐛</strong>
        <br />
        <p {...from("description")}>Morphing transitions was never so easy!</p>
      </a>

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

        <a onClick={() => go(0)} {...fadeIn()}>
          Back
        </a>
      </div>
    </div>
  )}
</ReactMorph>

Features 🌟

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

Keep in mind

Caveats:

  • 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

Sandbox

Edit j2rjln010w

TODO

Warning wip

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