Getting a compilation error adding react-morph to an empty create-react-app project :(

Failed to compile.

./node_modules/react-morph/lib/index.js
Module not found: Can't resolve 'popmotion/lib/animations/keyframes' in '.../node_modules/react-morph/lib'

I wanted to animate an image to resize but this only seems to work when I use the player example and have it animate between routes.

Using it like this makes the images disappear and appear at the end of the animation, the div container animates correctly though, it only seems to be an issue with images. Also the image type makes no impact whatsoever, png, svg, jpg, etc... none animate correctly.

App.js

import React, { Component, useState, useEffect } from "react";
import { createGlobalStyle } from "styled-components";
import { useMorph, useMorphKeys, presets } from "react-morph";
import { BrowserRouter as Router, Route } from "react-router-dom";

import "mapbox-gl/dist/mapbox-gl.css";
import { Container } from "./App.style";
import Header from "./components/Header";
import Map from "./components/Map";
import LoadingScreen from "./views/LoadingScreen";
const GlobalStyle = createGlobalStyle`
  html {
    height: 100%;
    width: 100%;
  }
  body {
    height: 100%;
    margin: 0;
    width: 100%;
    & #root {
      height: 100%;
      width: 100%;
    }
  }
`;

function App() {
  const [loaded, setLoaded] = useState(false);
  const morph = useMorph();
  const morphs = useMorphKeys(["logo", "container"]);

   return (
    <Container onClick={() => setLoaded(!loaded)}>
        <GlobalStyle />
        {!loaded ? <LoadingScreen morphs={morphs} /> : <Header morphs={morphs} />}
    </Container>
  );
}

export default App;

Loadingscreen:

import React from "react";
import logo from "../../assets/logo.png";
import { Container, Logo } from "./loadingScreen.style";

const LoadingScreen = ({ morphs }) => (
  <Container {...morphs.container}>
    <img {...morphs.logo} src={logo} />
  </Container>
);

export default LoadingScreen;

Header:

import React from "react";
import logo from "../../assets/logo.png";
import { HeaderContainer, Logo, Menu, Icon, MobileMenu } from "./header.style";
import doIcon from "../../assets/icons/do.svg";
import drinkIcon from "../../assets/icons/drink.svg";
import eatIcon from "../../assets/icons/eat.svg";
import seeIcon from "../../assets/icons/see.svg";

const Header = ({ morphs }) => (
  <HeaderContainer {...morphs.container}>
    <img {...morphs.logo} src={logo} />
    <Menu>
      <Icon icon={drinkIcon} />
      <Icon icon={eatIcon} />
      <Icon icon={seeIcon} />
      <Icon icon={doIcon} />
    </Menu>
    <MobileMenu>
      <Icon icon={drinkIcon} />
    </MobileMenu>
  </HeaderContainer>
);

export default Header;

Right now using go() imperatively doesn't feel right and limits the cases where react-morph can be applied. For example a state change can only be triggered from inside ReactMorph. In the real world this state comes from a Router, redux or a component somewhere else.

What I would love to see as an API would be a prop on the ReactMorph component that controls which state to show. E.g. <ReactMorph go={1}>.

Link https://codesandbox.io/s/7ywk4o0xmj

In each demo of yours (https://codesandbox.io/s/j2rjln010w and https://codesandbox.io/s/96x66mr6w) and in my code I see a warning in my console.
Warning: Failed prop type: checker is not a function in Morph

Maybe there is something wrong with the specified propTypes?

Best regards :)

I have a list of posts, and I have the post.
The list item is visually very similar to the post header and I'm trying to morph it.

But I have two problems here: I need to create morph 'instances' dynamically, somethink like id based, "on demand", and I need to share this instance to different files/components.

Something like this:

listing page:

const PostTeaser = ({ ...post }) => {
  const useMorphId(`post-${post.id}`)
  return <div {...morph}>...</div>
}

const PostList = ({ posts }) => (
  <div>{posts.map(post => <PostTeaser {...post} key={post.id} />)}</div>
)

post page:

const PostHeader = ({ ...post }) => {
  const useMorphId(`post-${post.id}`)
  return <div {...morph}>...</div>
}

const PostPage = ({ post }) => (
  <div>
    <PostHeader {...post} />
    <div>...</div>
  </div>
)

After many attempts and tested workarounds, I was able to do it using a Context that saves the instances by id in its state, and a hook that ask for a instance by id: if it doesn't exist, it creates, if it exists, it uses the existing one.

Code: https://codesandbox.io/s/nervous-mendeleev-ynrbq
(the magic is in morpher.js, and morphs are in pages/posts.js and pages/post.js)

But... questions:

1. Is there an easier way to satisfy this use case?
2. Is there a more trivial way to share instances without prop drilling or context?

Looks like it's missing from the package?

Is it MIT licensed ?

It might be a good idea to include modifiable examples such as: https://codesandbox.io/s/j2rjln010w

Or even for the more advanced one: https://codesandbox.io/s/96x66mr6w

This puts a hackable version a button away

I do not know if it is already possible but it would be interesting for create modals for example.

Idea of ​​how to allow this behavior: Only pick the styles (dimension, position, ...) when go to the second state and the portal is already mounted in the DOM.

Toggling the same element shouldn't trigger the clone/animation.

It'd be great if you could include a list of React apps that use this for their morphing transitions. This would help new potential users get an idea of how it can be implemented in production apps.

It looks like whenever react-morph is wrapped with a layout that utilizes the flex-direction CSS properties (EX: flex-direction: row) it causes some weird behavior on the first morph..

Hi, thanks for the cool library!
I've noticed that resizing the page breaks the animation:

To reproduce - load the storybook, resize the page (or in my case i opened the devtools docked to right) - trigger transition.

I don't really know if it's storybook specific, but just a heads up

An example for how to go in function will be great. Thanks for the cool package!

handleGo = () => {
  // ...
}

<ReactMorph>
  {({ from, to, fadeIn, go }) => (
    <div>
      <a onClick={this.handleGo}>
        <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>

When I import the library import ReactMorph from 'react-morph' I get this error :

Failed to compile
./node_modules/react-morph/lib/index.js
Module not found: Can't resolve 'popmotion/lib/easing' in 'F:\morph-animation\node_modules\react-morph\lib'

When morphing an element with text inside it, the last frame of the transition is a bit 'jumpy'.

Is there something that we can do to prevent that?

Hi,

I was trying to run the example on next.js but I got this issue:

ReferenceError: document is not defined
    at Object.<anonymous> (/node_modules/react-morph/lib/index.js:374:18)

My full code is:

import ReactMorph from "react-morph";

let something = "ricky";
if (process.browser){
  something = <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>;
}

export default () => something;

Can't wait to use this lib on our upcoming landing pages!