madou / Element Motion
Licence: mit
Tween between view states with declarative zero configuration element motions for React
Stars: ✭ 828
Programming Languages
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
Projects that are alternatives of or similar to Element Motion
Anix
🐿 Super easy and lightweight(<3kb) JavaScript animation library
Stars: ✭ 239 (-71.14%)
Mutual labels: transition, motion
Smart Security Camera
A Pi Zero and Motion based webcamera that forwards images to Amazon Web Services for Image Processing
Stars: ✭ 103 (-87.56%)
Mutual labels: motion, orchestration
Vue Motion
Easy and natural state transitions
Stars: ✭ 373 (-54.95%)
Mutual labels: transition, motion
Droidmotion
🏂 Implementation of a simple android motion
Stars: ✭ 200 (-75.85%)
Mutual labels: transition, motion
AniX
🐿 Super easy and lightweight(<3kb) JavaScript animation library
Stars: ✭ 253 (-69.44%)
Mutual labels: motion, transition
Use Web Animations
😎 🍿 React hook for highly-performant and manipulable animations using Web Animations API.
Stars: ✭ 802 (-3.14%)
Mutual labels: transition, motion
Maestro Ng
Orchestration of Docker-based, multi-host environments
Stars: ✭ 680 (-17.87%)
Mutual labels: orchestration
Drawerkit
DrawerKit lets an UIViewController modally present another UIViewController in a manner similar to the way Apple's Maps app works.
Stars: ✭ 755 (-8.82%)
Mutual labels: transition
Macaw
Powerful and easy-to-use vector graphics Swift library with SVG support
Stars: ✭ 5,756 (+595.17%)
Mutual labels: transition
Splarkcontroller
Custom transition between controllers. Settings controller for your iOS app.
Stars: ✭ 693 (-16.3%)
Mutual labels: transition
Spring Cloud Dataflow
A microservices-based Streaming and Batch data processing in Cloud Foundry and Kubernetes
Stars: ✭ 753 (-9.06%)
Mutual labels: orchestration
Stately.js
Stately.js is a JavaScript based finite-state machine (FSM) engine for Node.js and the browser.
Stars: ✭ 785 (-5.19%)
Mutual labels: transition
Ypnavigationbartransition
A Full functional UINavigationBar framework for making bar transition more natural! You don't need to call any UINavigationBar api, implementing YPNavigationBarConfigureStyle protocol for your view controller instead. （类似微信 iOS Navigation Bar 的切换方案）
Stars: ✭ 725 (-12.44%)
Mutual labels: transition
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.
Dynamic motions as easy as:
<Motion triggerSelfKey={isLarge}>
<Scale>{motion => <div {...motion} className={isLarge ? 'large' : 'small'} />}</Scale>
</Motion>
Get started
Check out our example motions and then once you're done have a look at the docs.
Installation
Element Motion requires React 16.4 or greater.
npm install @element-motion/core --save
or
yarn add @element-motion/core
Whats in a motion?
There are two halves to Element Motion:
- Orchestration (collecting DOM data, enabling motion between disconnected React elements, executing motions)
- Motions (animation concerns, CSS transitions/animations, JS animations, whatever you can imagine)
Next steps
- First time here? After installing head over to Getting started to start learning the basics
- Interested in elements in motion? Check out Focal motions
- For ready made experiences check out Composite experiences, just grab them and go!
- Having trouble? Maybe Troubleshooting has your answers
Talks
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].