Fast Morphing Library for the Web | morfy.js

morfy.js is a fast web conversion library that seamlessly converts an HTML element into another.

Morfy allows you to convert an HTML element into another element. It uses CSS transformations, so it’s really fast and the animations are unlockable. They are also interchangeable (funny word, right?). You can use it for example to convert a button into a modal.

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

Official Website(TimoBechtel): Click Here

This superior jQuery/javascript plugin is developed by TimoBechtel. For extra Advanced Usage, please go to the official website.

Share