JSPM

morfy

0.0.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q23992F
  • 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 ·

Table of Contents

Install

NPM:

npm install morfy

Usage

As module:

import { morph } from 'morfy';

Then:

const button = document.getElementById('test-button');
const target = document.getElementById('target');
button.addEventListener('click', () => {
  morph(button, target, {
    timingFunction: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
  });
});

Docs:

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

interface MorfyOptions {
  /**
   * duration in seconds
   */
  duration: number;
  /**
   * css timing function
   * @example 'ease-in'
   */
  timingFunction: string;
  /**
   * css properties to copy over to target
   */
  effectedCssProperties: string[];
}

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