itsdouges / element-motion

Tween between view states with declarative zero configuration element motions for React

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

React Sydney - 3rd June 2019