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.


npm install --save popmotion-react


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


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
  off: ({ value }) => tween({
    from: value.get(),
    to: 0

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