Press "Enter" to skip to content

Fast Morphing Library for the Web | morfy.js

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

svg morph animation, morphing background shapes css, shape morphing, css morphing div, morph one svg into another, morphing examples, morphing animation example

About

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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.