https://github.com/timobechtel/morfy
Fast morphing library for the web
https://github.com/timobechtel/morfy
css fast javascript morphing transform
Last synced: about 1 year ago
JSON representation
Fast morphing library for the web
- Host: GitHub
- URL: https://github.com/timobechtel/morfy
- Owner: TimoBechtel
- License: mit
- Created: 2020-05-11T08:19:37.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2023-01-06T05:33:36.000Z (over 3 years ago)
- Last Synced: 2024-10-12T01:42:42.389Z (over 1 year ago)
- Topics: css, fast, javascript, morphing, transform
- Language: TypeScript
- Homepage: https://timobechtel.github.io/morfy/
- Size: 1.29 MB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
morfy
Fast morphing library for the web
·
Homepage
·
View Demo
·
Report Bug / Request Feature
·
## Table of Contents
- [About](#About)
- [Installation](#Install)
- [Usage](#usage)
- [Test](#run-tests)
- [Contact](#contact)
- [Contributing](#Contributing)
- [License](#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:
```sh
npm install morfy
```
## Usage
### As module:
```javascript
import { createMorphable } from 'morfy';
```
Then:
```javascript
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:
```typescript
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
```sh
npm run test
```
## Contact
👤 **Timo Bechtel**
- Website: https://timobechtel.com
- Twitter: [@TimoBechtel](https://twitter.com/TimoBechtel)
- GitHub: [@TimoBechtel](https://github.com/TimoBechtel)
## 🤝 Contributing
Contributions, issues and feature requests are welcome!
1. Check [issues](https://github.com/TimoBechtel/morfy/issues)
1. Fork the Project
1. Create your Feature Branch (`git checkout -b feat/AmazingFeature`)
1. Test your changes `npm run test`
1. Commit your Changes (`git commit -m 'feat: add amazingFeature'`)
1. Push to the Branch (`git push origin feat/AmazingFeature`)
1. Open a Pull Request
### Commit messages
This project uses semantic-release for automated release versions. So commits in this project follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0-beta.2/) guidelines. I recommend using [commitizen](https://github.com/commitizen/cz-cli) for automated commit messages.
## Show your support
Give a ⭐️ if this project helped you!
## 📝 License
Distributed under the [MIT](https://github.com/TimoBechtel/morfy/blob/main/LICENSE) License.
---
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_