Enhancement

[petertenhoor]

Hi! Very cool package :)

I got some component transitions working with it: https://gyazo.com/127e3e538114861b2c6b1e56548f1aee

One thing I noticed while using the package which might be worth to fix or at least add to your documentation:

This wont work:

<h1 id={`snippet-recipe-title-${id}`} data-morph="250">
   {title}
</h1>

<span id={`snippet-recipe-date-${id}`} data-morph="250">
   {date}
</span>

This will work:

<div>
   <h1 id={`snippet-recipe-title-${id}`} data-morph="250">
      {title}
   </h1>
</div>

<div>
   <span id={`snippet-recipe-date-${id}`} data-morph="250">
      {date}
   </span> 
</div>

So it seems that morphing components can't be in the same level of the DOM.

During development I also get this warning in my console:

Warning: Failed prop type: MorphTransition: prop type `timeout` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.
    in MorphTransition (at _app.js:70)
    in MyApp (created by withRedux(MyApp))
    in withRedux(MyApp)
    in Suspense

I use the timeout prop with a value of 0 just like your example, so I'm not sure why that's happening.

[Irrelon]

Hey thanks for the feedback!

Interesting about the nesting... I wonder if it's because the elements need a parent to determine location before transition. I will have to take a look at some point (been busy with other work and can barely remember what I did here).

The bug you've mentioned in the console is actually something I picked up today! LOL. It's an incorrect proptype definition. I will get a fix for that pushed!

[Irrelon]

P.S. your video of the transitions on your site look amazing!

[Irrelon]

OK, pushed a new version with the proptypes fix. :)

[petertenhoor]

Well done, I can confirm that the proptypes warning is fixed!

The error when morphing two elements which are in the same DOM level is the following:

Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

It is trigged from this line