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

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
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: 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