· Homepage · View Demo · Report Bug / Request Feature ·

• About
• Installation
• Usage
• Test
• Contact
• Contributing
• License

Morfy allows you to morph one HTML Element into another. It uses CSS transforms, so it's really fast and animations are cancelable. It is also toggleable (funny word, huh?). You can use it for example to morph a button into a modal.

npm install morfy

import { createMorphable } from 'morfy';

Then:

const button = document.getElementById('test-button');
const modal = document.getElementById('modal');
const closeButton = document.getElementById('modal-close-button');

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

button.addEventListener('click', () => {
  morphable.morph();
});

closeButton.addEventListener('click', () => {
  morphable.revert();
});

Docs:

interface MorfyOptions {
  /**
   * duration in seconds
   */
  duration: number;
  /**
   * css timing function
   * provides autocompletion when using typescript
   * @example 'ease-in'
   */
  timingFunction: string;
  /**
   * css properties to be transitioned from source to target
   * provides autocompletion when using typescript
   */
  affectedCssProperties: string[];
}

interface Morphable {
  /**
   * start morphing
   */
  morph: () => void;
  /**
   * morph to initial state
   */
  revert: () => void;
}

/**
 * Creates and initializes morphable object
 */
function createMorphable(
  source: HTMLElement,
  target: HTMLElement,
  options: MorfyOptions
): Morphable;

/**
 * Directly morph things
 */
function morph(
  source: HTMLElement,
  target: HTMLElement,
  options: MorfyOptions
): void;

npm run test

👤 Timo Bechtel

• Website: https://timobechtel.com
• Twitter: @TimoBechtel
• GitHub: @TimoBechtel

Contributions, issues and feature requests are welcome!

1. Check issues
2. Fork the Project
3. Create your Feature Branch (git checkout -b feat/AmazingFeature)
4. Test your changes npm run test
5. Commit your Changes (git commit -m 'feat: add amazingFeature')
6. Push to the Branch (git push origin feat/AmazingFeature)
7. Open a Pull Request

This project uses semantic-release for automated release versions. So commits in this project follow the Conventional Commits guidelines. I recommend using commitizen for automated commit messages.

Give a ⭐️ if this project helped you!

Distributed under the MIT License.

This README was generated with ❤️ by readme-md-generator