Skip to content
Tween between view states with declarative zero configuration element motions for React
TypeScript JavaScript
Branch: master
Clone or download

README.md

Element 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

You can’t perform that action at this time.