Morph HTML Element Into Another In JavaScript – morfy.js

Preview:

Description:

morfy.js is a tiny JavaScript library that smoothly morphs one HTML element into another.

How to use it:

1. Install & download the package.

# 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 trigger button 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: ''
});

Changelog:

v1.0.0 (07/21/2021)

• Bug Fixes
• Add function to revert morhping