morfy

Fast morphing library for the web

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

Warning This is still in an early stage, please do not use it in production yet.

Table of Contents

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

About

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.

Install

NPM:

npm install morfy

Usage

As module:

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;

Run tests

npm run test

Contact

👤 Timo Bechtel

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

🤝 Contributing

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

Commit messages

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.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Distributed under the MIT License.

---

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