Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/madou/element-motion
Tween between view states with declarative zero configuration element motions for React
https://github.com/madou/element-motion
animation element-motion javascript material-motion motion orchestration reactjs transition
Last synced: about 2 months ago
JSON representation
Tween between view states with declarative zero configuration element motions for React
- Host: GitHub
- URL: https://github.com/madou/element-motion
- Owner: itsdouges
- License: mit
- Archived: true
- Created: 2016-06-13T02:36:40.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-04-14T07:55:24.000Z (over 4 years ago)
- Last Synced: 2024-04-13T19:05:10.484Z (5 months ago)
- Topics: animation, element-motion, javascript, material-motion, motion, orchestration, reactjs, transition
- Language: TypeScript
- Homepage: https://elementmotion.com
- Size: 68.4 MB
- Stars: 811
- Watchers: 10
- Forks: 13
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - element-motion
README
# Element Motion
This has been archived.
If 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.
The 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.
Check it out here: https://www.framer.com/motion/
---
Tween between view states with declarative zero configuration element motions for [React](https://reactjs.org/).
[](https://www.npmjs.com/package/@element-motion/core) [](https://bundlephobia.com/result?p=@element-motion/core)
Dynamic motions as easy as:
```js
{motion =>
}
```
## Get started
Check out our [example motions](https://elementmotion.com) and then once you're done have a [look at the docs](https://elementmotion.com/getting-started).
### Installation
Element Motion requires React 16.4 or greater.
```bash
npm install @element-motion/core --save
```
or
```bash
yarn add @element-motion/core
```
### Whats in a motion?
There are two halves to Element Motion:
- [**Orchestration**](https://elementmotion.com/motion) (collecting DOM data, enabling motion between disconnected React elements, executing motions)
- [**Motions**](https://elementmotion.com/custom-motions) (animation concerns, CSS transitions/animations, JS animations, whatever you can imagine)
### Next steps
- **First time** here? After installing head over to [Getting started](https://elementmotion.com/getting-started) to start learning the basics
- Interested in **elements in motion**? Check out [Focal motions](https://elementmotion.com/focal-motions)
- For **ready made experiences** check out [Composite experiences](https://elementmotion.com/composite-experiences), just grab them and go!
- Having **trouble**? Maybe [Troubleshooting](https://elementmotion.com/troubleshooting) has your answers
## Talks
