Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-timing with all npm packages installed. Try it out:

var reactTiming = require("react-timing")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-timing v1.0.1

react components for timing animations, etc


Timing as a component

npm install react-timing --save

// an example with react-motion
<Timing from={{top: 1000, left: 0}} sequence={[
  {period: 1000, value:{top: 100, left: 0}},
  {period: 1000, value:{top: 100, left: 100}},
  {period: 1000, value:{top: 0, left: 100}},
  {period: 1000, value:{top: 0, left: 0}}
  ]}>{val =>
    <Spring endValue={{val}}>{ i9ed =>
      <div style={{...i9ed.val, backgroundColor: 'wheat', height: 100, width: 100, position: 'absolute'}}>
        move it

this is just the start; the hope is to achieve parity with Greensock's awesome timeline api. Open to ideas!


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free