{"id":13393750,"url":"https://github.com/jeffersonlicet/react-motion-layout","last_synced_at":"2025-04-04T22:05:33.100Z","repository":{"id":39187432,"uuid":"245872980","full_name":"jeffersonlicet/react-motion-layout","owner":"jeffersonlicet","description":"🦸 Beautiful immersive React hero animations.","archived":false,"fork":false,"pushed_at":"2023-09-04T11:17:57.000Z","size":1637,"stargazers_count":593,"open_issues_count":15,"forks_count":22,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-02-17T12:37:34.815Z","etag":null,"topics":["animate","animations","react","react-router","reactjs","transitions"],"latest_commit_sha":null,"homepage":"http://motion-layout.com","language":"JavaScript","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/jeffersonlicet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-08T19:14:45.000Z","updated_at":"2024-05-30T06:29:28.117Z","dependencies_parsed_at":"2024-05-30T06:44:50.125Z","dependency_job_id":null,"html_url":"https://github.com/jeffersonlicet/react-motion-layout","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffersonlicet%2Freact-motion-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffersonlicet%2Freact-motion-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffersonlicet%2Freact-motion-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffersonlicet%2Freact-motion-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeffersonlicet","download_url":"https://codeload.github.com/jeffersonlicet/react-motion-layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256110,"owners_count":20909240,"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":["animate","animations","react","react-router","reactjs","transitions"],"created_at":"2024-07-30T17:00:59.770Z","updated_at":"2025-04-04T22:05:33.071Z","avatar_url":"https://github.com/jeffersonlicet.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"http://motion-layout.com/img/logo.png\" alt=\"drawing\" width=\"100\"/\u003e\n\u003c/p\u003e\n\n\u003ch2 align=\"center\"\u003eMotion Layout\u003c/h2\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://img.shields.io/npm/dt/react-motion-layout?style=flat-square\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/react-motion-layout?style=flat-square\"?\u003c/a\u003e\n  \u003ca href=\"https://badges.pufler.dev/visits/jeffersonlicet/react-motion-layout\"\u003e\u003cimg src=\"https://badges.pufler.dev/visits/jeffersonlicet/react-motion-layout\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-motion-layout\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-motion-layout?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=react-motion-layout@0.1.1\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/min/react-motion-layout?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"http://motion-layout.com\"\u003e\u003cimg src=\"https://github.com/jeffersonlicet/react-motion-layout/workflows/Website%20Deploy/badge.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\n\u003cp align=\"center\"\u003eCreate beautiful immersive React hero animations using shared components.\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://media.giphy.com/media/L0Sog8CoIRlNjvbOvj/giphy.gif\"\u003e\n\u003c/p\u003e\n\n___\n\n## Docs\n[React Motion Layout Docs](http://motion-layout.com)\n\n## About\n\n#### Motivation\nThere are amazing libraries like framer-motion that help you create animations when mounting or unmounting components. But, if two routes have the same image in different positions and sizes, they cannot be animated together. With Motion Layout, you can link components together to animate them when changing views.\n\n#### Browser support\nSupported on modern versions of all major browsers including:\n\n- Chrome 56+\n- Firefox 27+\n- IE10+ (including Edge)\n- Safari (iOS) 7.1+\n- Safari (Mac) 9+\n- Firefox Mobile\n- Chrome for Android\n- Android Webview\n\n#### Declarative\nEasy as wraping your text or images with our SharedElement component.\n\n#### Isolated\nIt doesn't require external state management libs.\n\n#### Router Ready\nDispatch animations when changing routes using our React-Router Link component.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeffersonlicet%2Freact-motion-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeffersonlicet%2Freact-motion-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeffersonlicet%2Freact-motion-layout/lists"}