How to make use of it:

1. Install & download the bundle.

# NPM
$ npm install morfy --save

2. Import themorfy.js as a module.

import { createMorphable } from 'morfy';

<!-- OR -->
<script type="module">
  import { createMorphable } from './dist/index.module.js';
</script>

3. Morph a set-off button right into a modal window.

const button = document.getElementById('trigger-button');
const modal = document.getElementById('modal');
const morphable = createMorphable(button, modal, {
      // options here
});

// start
morphable.morph();

// revert
morphable.revert();

4. Customize the duration of the animation (in seconds).

const morphable = createMorphable(button, modal, {
      duration: 5
});

5. Apply a CSS timing function to the animation.

const morphable = createMorphable(button, modal, {
      timingFunction: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
});

6. Apply CSS properties to the animation.

const morphable = createMorphable(button, modal, {
      effectedCssProperties: ''
});

Morph HTML Element Into Another, morfy Plugin/Github

See Demo And Download