Morphing Ui transitions made simple
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
lib
src
.babelrc Initial commit Feb 7, 2018
.editorconfig
.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
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 ?