Morphing UI Transitions with React Morph

Updated on April 27, 2020


Morphing UI Transitions with React Morph

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Love them or hate them, animations in modern web design are probably here to stay. Unlike the glory days of jQuery, React out of the box does not provide any mechanism to perform such animations. Sure you could do a small bit of CSS wizardry to animate elements, but what if want to morph one set of elements into another? What’s were react-morph comes into play.

react-morph is a small JavaScript library that provides a <ReactMorph> component that leverages render props to easily create morphing effects in your React app.

Getting Started

Before we can get started, we need to add react-morph to our project with either npm or yarn:

# via npm
$ npm install --save react-morph

# via yarn
$ yarn add react-morph

Be sure to include react-morph in your project wherever you’d like to use it:

import ReactMorph from "react-morph";


Before we dive deeper into react-morph, I want to talk a bit about the caveats or “gotchas” with this library.

First, like most open source offerings, it is a work in progress. A lot of things are works in progress though. Heck, even React is ;)

Next, react-morph is quite sensitive to whitespace as it can introduce additional spacing to an element and throw off the morphing animation. You may need to set your element to display: inline-block or wrap all of the content in another element.

As mentioned, additional spacing can cause problems so things like margins can also give you grief. Be sure to match the margins on both elements in your transition or simply wrap things up with another element.

List items introduce similar issues and applying list-style: none should help things along.

If things are still acting weird, you may need to add in some placeholder elements to avoid additional distortion.

Animations in general can be tricky to get just right so I don’t think any of these little quirks should sway you from this library.


The usage of react-morph is pretty simple.

Using <ReactMorph> exposes a series of properties that we can use to flag our different transition states (from and to), animation tweens (fadeIn and fadeOut) and a function that you can fire to start the transition (go).

The from and to properties take a string property that will serve as the key to link the states together for transitioning.

Basic Morphing

The most basic example I could think of is taking some text and morphing it into some other text.

  {({ from, to, fadeIn, fadeOut, go }) => (
      <a onClick={() => go(1)}>
        <h3 {...from("text")} style={{ display: "inline-block" }}>
          See ya later, alligator...
        <p {...fadeOut()}>Click the text above ;)</p>
        <h3 {...to("text")} style={{ display: "inline-block" }}>
          After awhile, crocodile!
          <a onClick={() => go(0)} {...fadeIn()}>
            Would you like to redo?

Nothing too crazy here. We simply wrap both of our states in <ReactMorph>, setup our click events to use go() to go between states and to(key) to identify the parts of the state.

As you can see, some of the elements have been styled to display inline-block. This removed some weird quirks with the elements popping around on the page a bit.

It’s also worth noting that react-morph appears to only handle two states. Since go() accepts an integer, I thought I’d try to set things up with a third state and well, no dice.

More Complex Usage

Morphing text is great to showcase what react-morph can do, but it’s probably not how you’d use this library in your app.

A bit more of a real world example would taking a button that a user clicks on to reveal a menu and morphing said button into a menu:

  {({ from, to, go }) => (
        display: "flex",
        justifyContent: "center",
        position: "relative",
        onClick={() => go(1)}
        style={{ position: "absolute" }}
        Click to Open
          backgroundColor: "#6DB65B",
          border: "2px solid #008f68",
          padding: 10,
          position: "absolute",
            alignItems: "center",
            display: "flex",
            justifyContent: "space-between",
            width: "100%",
          <button onClick={() => go(0)}>X</button>
        <hr />
        <div>Menu Item 1</div>
        <div>Menu Item 2</div>
        <div>Menu Item 3</div>

Same concepts as before, just a bit of a different approach to the styling to get each state to seemingly occupy the same position.


Caveats aside, react-morph makes it very easy to drop in some more sophisticated morphing animations between elements in your React app.

I hope you enjoyed this post and if you’re interested in seeing a demo of the code from this post, you can check it out over on CodeSandbox.


Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us

About the authors
Default avatar


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel