{"id":13559372,"url":"https://github.com/matteobortolazzo/fast-morph","last_synced_at":"2025-04-03T14:32:01.931Z","repository":{"id":85481917,"uuid":"123042584","full_name":"matteobortolazzo/fast-morph","owner":"matteobortolazzo","description":"A Morphing UI web component built with StencilJS","archived":true,"fork":false,"pushed_at":"2019-06-09T11:07:05.000Z","size":2149,"stargazers_count":97,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-18T04:54:08.000Z","etag":null,"topics":["ionic","morphing-interface","stenciljs","webcomponents"],"latest_commit_sha":null,"homepage":"","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/matteobortolazzo.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-02-26T23:04:29.000Z","updated_at":"2025-02-12T10:09:35.000Z","dependencies_parsed_at":"2023-03-19T00:02:22.823Z","dependency_job_id":null,"html_url":"https://github.com/matteobortolazzo/fast-morph","commit_stats":{"total_commits":23,"total_committers":2,"mean_commits":11.5,"dds":"0.34782608695652173","last_synced_commit":"2a62954f3262c0c9a639a71b0bd03d3945417a6a"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matteobortolazzo%2Ffast-morph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matteobortolazzo%2Ffast-morph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matteobortolazzo%2Ffast-morph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matteobortolazzo%2Ffast-morph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matteobortolazzo","download_url":"https://codeload.github.com/matteobortolazzo/fast-morph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247018569,"owners_count":20870024,"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":["ionic","morphing-interface","stenciljs","webcomponents"],"created_at":"2024-08-01T13:00:20.308Z","updated_at":"2025-04-03T14:32:01.539Z","avatar_url":"https://github.com/matteobortolazzo.png","language":"TypeScript","funding_links":[],"categories":["Ecosystem Highlights"],"sub_categories":["Data \u0026 Visualization"],"readme":"# Fast Morph\n\n**A Morphing UI web component built with StencilJS**\n\nInspired by brunnolou's [react-morph](https://github.com/brunnolou/react-morph)\n\n![Sign-In example](https://raw.githubusercontent.com/matteobortolazzo/fast-morph/master/gifs/motion-ui-sign-in.gif)\n\n\n## Install\n```\nnpm i @matteobortolazzo/fast-morph --save\n```\n\n## Usage\n\n**Pure HTML**\n```\n\u003cscript src=\"https://unpkg.com/@matteobortolazzo/fast-morph@1.1.0/dist/fast-morph.js\"\u003e\u003c/script\u003e \n```\n\n**Frameworks**\n\nPlease visit [https://stenciljs.com/docs/overview](https://stenciljs.com/docs/overview)\n\n\n## Example\n\n1. Create two states (HTML)\n2. Wrap both in one fast-morph component (using slot=\"state-0\" and slot=\"state-1\")\n3. Label the elements you want to morph with itemprop=\"fm-\\\u003csomething\\\u003e\"\n4. Label the elements you want to use to change state with itemprop=\"fm-activator\"\n\n```html\n\u003cfast-morph\u003e\n    \u003cdiv slot=\"state-0\"\u003e\n      \u003cdiv itemprop=\"fm-activator\" class=\"state-0-div\"\u003e\n        \u003cdiv itemprop=\"fm-sign-in-back\" class=\"sign-in-back\"\u003e\u003c/div\u003e\n        \u003cdiv itemprop=\"fm-sign-in\"\u003eSign In\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv slot=\"state-1\"\u003e\n      \u003cdiv class=\"form-container\"\u003e\n        \u003cdiv class=\"form-back\" itemprop=\"fm-sign-in-back\"\u003e\u003c/div\u003e\n        \u003cform\u003e\n          \u003cdiv class=\"label\"\u003eEmail\u003c/div\u003e\n          \u003cinput /\u003e\n          \u003cdiv class=\"label password\"\u003ePassword\u003c/div\u003e\n          \u003cinput /\u003e\n          \u003cbr /\u003e\n          \u003cdiv itemprop=\"fm-sign-in\" class=\"sign-in\"\u003eSign In\u003c/div\u003e\n          \u003cdiv class=\"cancel\" itemprop=\"fm-activator\"\u003eCancel\u003c/div\u003e\n        \u003c/form\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/fast-morph\u003e\n```\n\n## Keep in mind\n(this section is from [**brunnolou**'s react-morph](https://github.com/brunnolou/react-morph))\n\n* You need to remove extra whitespace, to match the real element's width, the solution is display: inline-block or a wrapping element to the content.\n* Margins are always tricky because they create extra white space. You can either wrap the content in another element and animate it or be sure to match both the margins in both states.\n* Sometimes it's necessary to create a placeholder element for the transition to avoid child distortion.\n* List items could be miscalculated; a simple solution is: list-style: none;.\n* Sometimes you need extra layers instead of nested children.\n* Avoid animating both the parent and children to avoid unpredicted results.\n\n![Card example](https://raw.githubusercontent.com/matteobortolazzo/fast-morph/master/gifs/motion-ui-card.gif) \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatteobortolazzo%2Ffast-morph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatteobortolazzo%2Ffast-morph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatteobortolazzo%2Ffast-morph/lists"}