{"id":13727463,"url":"https://github.com/itsdouges/element-motion","last_synced_at":"2025-09-30T13:32:11.486Z","repository":{"id":57111083,"uuid":"61001721","full_name":"itsdouges/element-motion","owner":"itsdouges","description":"Tween between view states with declarative zero configuration element motions for React","archived":true,"fork":false,"pushed_at":"2020-04-14T07:55:24.000Z","size":71695,"stargazers_count":811,"open_issues_count":14,"forks_count":13,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-04-13T19:05:10.484Z","etag":null,"topics":["animation","element-motion","javascript","material-motion","motion","orchestration","reactjs","transition"],"latest_commit_sha":null,"homepage":"https://elementmotion.com","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/itsdouges.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":"2016-06-13T02:36:40.000Z","updated_at":"2024-03-21T17:06:14.000Z","dependencies_parsed_at":"2022-08-20T18:50:35.172Z","dependency_job_id":null,"html_url":"https://github.com/itsdouges/element-motion","commit_stats":null,"previous_names":["madou/yubaba","element-motion/element-motion","madou/element-motion"],"tags_count":64,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Felement-motion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Felement-motion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Felement-motion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Felement-motion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itsdouges","download_url":"https://codeload.github.com/itsdouges/element-motion/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234744628,"owners_count":18879955,"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":["animation","element-motion","javascript","material-motion","motion","orchestration","reactjs","transition"],"created_at":"2024-08-03T01:03:58.014Z","updated_at":"2025-09-30T13:32:05.995Z","avatar_url":"https://github.com/itsdouges.png","language":"TypeScript","readme":"# Element Motion\n\nThis has been archived.\nIf you're looking for a solid implementation of an animation engine/FLIP style animations that are easy to use I highly recommend checking out Framer Motion.\n\nThe latest update with the `animate` prop truly is the nail in the coffin for Element Motion - it does everything this library does and more with a fantastic API.\n\nCheck it out here: https://www.framer.com/motion/\n\n---\n\nTween between view states with declarative zero configuration element motions for [React](https://reactjs.org/).\n\n[![npm](https://img.shields.io/npm/v/@element-motion/core.svg)](https://www.npmjs.com/package/@element-motion/core) [![npm bundle size (minified + gzip)](https://badgen.net/bundlephobia/minzip/@element-motion/core)](https://bundlephobia.com/result?p=@element-motion/core)\n\n\u003ca href=\"https://elementmotion.com/getting-started#moving-from-a-persisted-element\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/6801309/57364146-eff7c800-71c5-11e9-9ddd-98ec510a6002.gif\" height=\"500\" alt=\"Moving from a persisted element\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://elementmotion.com/getting-started#moving-to-another-distinct-element\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/6801309/57364968-88db1300-71c7-11e9-8a51-b45b45eb64ab.gif\" height=\"500\" alt=\"Moving to another distinct element\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://elementmotion.com/advanced-usage#moving-using-a-focal-target\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/6801309/57364297-3cdb9e80-71c6-11e9-9a5f-e69ad9a7184b.gif\" height=\"500\" alt=\"Moving using a focal target\" /\u003e\u003c/a\u003e\n\nDynamic motions as easy as:\n\n```js\n\u003cMotion triggerSelfKey={isLarge}\u003e\n  \u003cScale\u003e{motion =\u003e \u003cdiv {...motion} className={isLarge ? 'large' : 'small'} /\u003e}\u003c/Scale\u003e\n\u003c/Motion\u003e\n```\n\n## Get started\n\nCheck out our [example motions](https://elementmotion.com) and then once you're done have a [look at the docs](https://elementmotion.com/getting-started).\n\n### Installation\n\nElement Motion requires React 16.4 or greater.\n\n```bash\nnpm install @element-motion/core --save\n```\n\nor\n\n```bash\nyarn add @element-motion/core\n```\n\n### Whats in a motion?\n\nThere are two halves to Element Motion:\n\n- [**Orchestration**](https://elementmotion.com/motion) (collecting DOM data, enabling motion between disconnected React elements, executing motions)\n- [**Motions**](https://elementmotion.com/custom-motions) (animation concerns, CSS transitions/animations, JS animations, whatever you can imagine)\n\n### Next steps\n\n- **First time** here? After installing head over to [Getting started](https://elementmotion.com/getting-started) to start learning the basics\n- Interested in **elements in motion**? Check out [Focal motions](https://elementmotion.com/focal-motions)\n- For **ready made experiences** check out [Composite experiences](https://elementmotion.com/composite-experiences), just grab them and go!\n- Having **trouble**? Maybe [Troubleshooting](https://elementmotion.com/troubleshooting) has your answers\n\n## Talks\n\n\u003ca href=\"https://www.icloud.com/keynote/0ryFt4ce-WLXBwwOttgI9SbMA#element-motion-react-sydney\"\u003e\u003cimg width=\"250\" height=\"140\" alt=\"Element Motion @ React Sydney 3rd June 2019 Slides\" src=\"https://user-images.githubusercontent.com/6801309/58944241-bade9580-87c4-11e9-99f1-435943e7fa14.png\"\u003e\u003c/a\u003e\n\u003cbr /\u003e\u003ca href=\"https://www.meetup.com/React-Sydney/events/261817672/\"\u003e\u003cstrong\u003eReact Sydney\u003c/strong\u003e - 3rd June 2019\u003c/a\u003e\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsdouges%2Felement-motion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsdouges%2Felement-motion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsdouges%2Felement-motion/lists"}