JSPM

morfy

1.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q23969F
  • License MIT

Morph one element into another using css transforms.

Package Exports

  • morfy

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (morfy) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

morfy

Fast morphing library for the web

Version License: MIT

· 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

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

🤝 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