Declarative element motions for React

It's all about ✨motion over state transitions ✨ - it can help with:

• 📴 Enabling motion to be possible between two disconnected elements in the React tree
• 🚚 Moving an element from one location to another
• 💨 Revealing elements inside another element
• 👓 Supporting motion by obstructing elements in view
• 🤫 Hiding child elements until all motions have completed
• 🔢 Orchestrating when motions should start and in what order
• 📝 Composing motions together to create composites, for example CrossFadeMove
• 🤯 Anything you can imagine, seriously

Which all boil down to two areas:

• Orchestration (collecting DOM data, enabling motion between disconnected React elements, executing motions)
• Motions (animation concerns, CSS transitions/animations, JS animations, whatever you can imagine)

React Sydney - 3rd June 2019

npm install @element-motion/core react react-dom --save

or

yarn add @element-motion/core react react-dom

React should be at least v16.4.

import Motion, { Move } from '@element-motion/core';

({ isLarge }) => (
  <Motion triggerSelfKey={isLarge}>
    <Move>{motion => <div {...motion} className={isLarge ? 'large' : 'small'} />}</Move>
  </Motion>
);

• 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