import React from 'react'
import { Animate } from 'react-move'

const animateOptions = {
  // Set some default data
  default: {
    scale: 0,
    color: 'blue',
    rotate: 0
  },
  // Update your data to whatever you want
  data: {
    scale: Math.random() * 1,
    color: ['red', 'blue', 'yellow'].find((d, i) => i === Math.round(Math.random() * 2)),
    rotate: Math.random() > 0.5 ? 360 : 0
  },
  duration: 800,
  // anything from https://github.com/d3/d3-ease
  easing: 'easeQuadIn'
};

<Animate {...animateOptions}>
  {data => { // the child function is passed the current state of the data as an object
    return (
      <div
        style={{
          borderRadius: ((data.rotate / 360) * 100) + 'px',
          transform: `translate(${data.scale * 50}%, ${data.scale * 50}%) scale(${data.scale}) rotate(${data.rotate}deg)`,
          background: data.color
        }}
      >
        {Math.round(data.scale * 100) / 100}
      </div>
    )
  }}
</Animate>