morfy
Fast morphing library for the web
· Homepage · View Demo · Report Bug / Request Feature ·
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
- Website: https://timobechtel.com
- Twitter: @TimoBechtel
- GitHub: @TimoBechtel
🤝
Contributing
Contributions, issues and feature requests are welcome!
- Check issues
- Fork the Project
- Create your Feature Branch (
git checkout -b feat/AmazingFeature) - Test your changes
npm run test - Commit your Changes (
git commit -m 'feat: add amazingFeature') - Push to the Branch (
git push origin feat/AmazingFeature) - 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
📝
License
Distributed under the MIT License.
This README was generated with
4.3k Jan 6, 2023
14.5k Jan 4, 2023
105 Jun 18, 2022
8 Jan 23, 2022
161k Jan 1, 2023
22.7k Jan 3, 2023
16.6k Jan 3, 2023
4.6k Dec 29, 2022
302 Sep 26, 2022
2.7k Jan 1, 2023
996 Dec 26, 2022
394 Jan 1, 2023
89 Dec 30, 2022
91 Dec 24, 2022
5 Aug 17, 2022
3 Dec 16, 2021
2.9k Jan 4, 2023
9 Jun 12, 2022
26 Dec 31, 2022