Skip to content
This repository has been archived by the owner. It is now read-only.
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

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:

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>

Get started

Check out our example motions and then once you're done have a look at the docs.


Element Motion requires React 16.4 or greater.

npm install @element-motion/core --save


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


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