Popmotion x React

Popmotion x React provides a declarative interface to use Popmotion’s animation and input tracking with any React component.

It uses the “function as children” pattern, so you can create declarative interactions with the DOM, SVG, Three.js, A-Frame, Pixi… anything that has a React wrapper available.

It also has support for React TransitionGroup lifecycle methods.

View demo Download Source

Install

npm install --save popmotion-react

MotionValue

The MotionValue component allows you to declaratively animate a single value.

Usage

MotionValue is a simple state machine. You provide state transition handlers that describe what animation should play when a state is set, and it provides setter functions to your component. For instance:

import { tween } from 'popmotion';
import { MotionValue } from 'popmotion-react';

const stateChangeHandlers = {
  on: ({ value }) => tween({
    from: value.get(),
    to: 100
  }).start(value),
  off: ({ value }) => tween({
    from: value.get(),
    to: 0
  }).start(value)
};

export default () => (
  <MotionValue onStateChange={stateChangeHandlers}>
    {({ v, state, setStateTo }) => (
      <div
        style={{
          background: 'red',
          width: '100px',
          height: '100px',
          transform: 'translateX(' + v + 'px)'
        }}
        onClick={state === 'on' ? setStateTo.off : setStateTo.on}
      />
    )}
  </MotionValue>
);

GitHub