/element-motion

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

Primary LanguageTypeScriptMIT LicenseMIT

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.

npm npm bundle size (minified + gzip)

Moving from a persisted element Moving to another distinct element Moving using a focal target

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

Talks

Element Motion @ React Sydney 3rd June 2019 Slides
React Sydney - 3rd June 2019