Morph HTML Element Into Another In JavaScript – morfy.js

Category: Animation , Javascript | May 21, 2020
Author: TimoBechtel
Views Total: 52
Official Page: Go to website
Last Update: May 21, 2020
License: MIT

Preview:

Morph HTML Element Into Another In JavaScript – morfy.js

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

You Might Be Interested In:


Leave a Reply