{"id":16355952,"url":"https://github.com/timobechtel/morfy","last_synced_at":"2025-03-23T01:31:26.578Z","repository":{"id":38426864,"uuid":"262981787","full_name":"TimoBechtel/morfy","owner":"TimoBechtel","description":"Fast morphing library for the web","archived":false,"fork":false,"pushed_at":"2023-01-06T05:33:36.000Z","size":1355,"stargazers_count":5,"open_issues_count":11,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-12T01:42:42.389Z","etag":null,"topics":["css","fast","javascript","morphing","transform"],"latest_commit_sha":null,"homepage":"https://timobechtel.github.io/morfy/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TimoBechtel.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-11T08:19:37.000Z","updated_at":"2023-03-07T02:39:31.000Z","dependencies_parsed_at":"2023-02-05T10:46:14.549Z","dependency_job_id":null,"html_url":"https://github.com/TimoBechtel/morfy","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimoBechtel%2Fmorfy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimoBechtel%2Fmorfy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimoBechtel%2Fmorfy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimoBechtel%2Fmorfy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TimoBechtel","download_url":"https://codeload.github.com/TimoBechtel/morfy/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221841826,"owners_count":16890052,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","fast","javascript","morphing","transform"],"created_at":"2024-10-11T01:42:14.141Z","updated_at":"2024-10-28T14:40:38.821Z","avatar_url":"https://github.com/TimoBechtel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003emorfy\u003c/h1\u003e\n\u003ch3 align=\"center\"\u003eFast morphing library for the web\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/morfy\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Version\" src=\"https://img.shields.io/npm/v/morfy.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/TimoBechtel/morfy/blob/main/LICENSE\" target=\"_blank\"\u003e\n    \u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/github/license/TimoBechtel/morfy\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  ·\n  \u003ca href=\"https://github.com/TimoBechtel/morfy#readme\"\u003eHomepage\u003c/a\u003e\n  ·\n  \u003ca href=\"https://timobechtel.github.io/morfy/\"\u003eView Demo\u003c/a\u003e\n  ·\n  \u003ca href=\"https://github.com/TimoBechtel/morfy/issues\"\u003eReport Bug / Request Feature\u003c/a\u003e\n  ·\n\u003c/p\u003e\n\n## Table of Contents\n\n- [About](#About)\n- [Installation](#Install)\n- [Usage](#usage)\n- [Test](#run-tests)\n- [Contact](#contact)\n- [Contributing](#Contributing)\n- [License](#license)\n\n## About\n\nMorfy 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.\n\n## Install\n\n### NPM:\n\n```sh\nnpm install morfy\n```\n\n## Usage\n\n### As module:\n\n```javascript\nimport { createMorphable } from 'morfy';\n```\n\nThen:\n\n```javascript\nconst button = document.getElementById('test-button');\nconst modal = document.getElementById('modal');\nconst closeButton = document.getElementById('modal-close-button');\n\nconst morphable = createMorphable(button, modal, {\n  timingFunction: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',\n});\n\nbutton.addEventListener('click', () =\u003e {\n  morphable.morph();\n});\n\ncloseButton.addEventListener('click', () =\u003e {\n  morphable.revert();\n});\n```\n\nDocs:\n\n```typescript\ninterface MorfyOptions {\n  /**\n   * duration in seconds\n   */\n  duration: number;\n  /**\n   * css timing function\n   * provides autocompletion when using typescript\n   * @example 'ease-in'\n   */\n  timingFunction: string;\n  /**\n   * css properties to be transitioned from source to target\n   * provides autocompletion when using typescript\n   */\n  affectedCssProperties: string[];\n}\n\ninterface Morphable {\n  /**\n   * start morphing\n   */\n  morph: () =\u003e void;\n  /**\n   * morph to initial state\n   */\n  revert: () =\u003e void;\n}\n\n/**\n * Creates and initializes morphable object\n */\nfunction createMorphable(\n  source: HTMLElement,\n  target: HTMLElement,\n  options: MorfyOptions\n): Morphable;\n\n/**\n * Directly morph things\n */\nfunction morph(\n  source: HTMLElement,\n  target: HTMLElement,\n  options: MorfyOptions\n): void;\n```\n\n## Run tests\n\n```sh\nnpm run test\n```\n\n## Contact\n\n👤 **Timo Bechtel**\n\n- Website: https://timobechtel.com\n- Twitter: [@TimoBechtel](https://twitter.com/TimoBechtel)\n- GitHub: [@TimoBechtel](https://github.com/TimoBechtel)\n\n## 🤝 Contributing\n\nContributions, issues and feature requests are welcome!\u003cbr /\u003e\n\n1. Check [issues](https://github.com/TimoBechtel/morfy/issues)\n1. Fork the Project\n1. Create your Feature Branch (`git checkout -b feat/AmazingFeature`)\n1. Test your changes `npm run test`\n1. Commit your Changes (`git commit -m 'feat: add amazingFeature'`)\n1. Push to the Branch (`git push origin feat/AmazingFeature`)\n1. Open a Pull Request\n\n### Commit messages\n\nThis 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.\n\n## Show your support\n\nGive a ⭐️ if this project helped you!\n\n## 📝 License\n\nDistributed under the [MIT](https://github.com/TimoBechtel/morfy/blob/main/LICENSE) License.\n\n---\n\n_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimobechtel%2Fmorfy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimobechtel%2Fmorfy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimobechtel%2Fmorfy/lists"}