ranimated-element.js

  <RAnimated name={name}
    elements={{root: 'root'}}
    // Build a animation state from the element
    update={update.object({
      x: element => element.getBoundingClientRect().left,
      y: element => element.getBoundingClientRect().top,
      width: element => element.getBoundingClientRect().width,
      height: element => element.getBoundingClientRect().height,
      opacity: () => 1,
    })}
    // Build a animation end state for the element enter with
    updateEnter={update.object({
      x: element => element.getBoundingClientRect().left,
      y: element => element.getBoundingClientRect().top,
      width: element => element.getBoundingClientRect().width,
      height: element => element.getBoundingClientRect().height,
      opacity: () => 0,
    })}
    // Build a animation end state for the element leave with
    updateLeave={update.object({
      x: element => element.getBoundingClientRect().left + 50,
      y: element => element.getBoundingClientRect().top + 50,
      width: element => element.getBoundingClientRect().width,
      height: element => element.getBoundingClientRect().height,
      opacity: () => 0,
    })}
    // Animate the current state from beginning to end
    animate={animate.duration(0.3, animate.object({
      x: animate.begin().to(animate.end()),
      y: animate.begin().to(animate.end()),
      width: animate.begin().to(animate.end()),
      height: animate.begin().to(animate.end()),
      opacity: animate.begin().to(animate.end()),
    }))}
    // Present the current state
    present={present.styles({
      transform: present.concat([
        // The x and y values of this translate is relative to where the element
        // was rendered at, giving it the illusion that it is animating from
        // where it was last.
        //
        // It then also consider the scale to smoothly animate entering or
        // leaving the page and animating around the board.
        present.translate([
          present.key('x').sub(present.key('x').end())
          .sub(
            present.key('width').end()
            .sub(present.key('width'))
            .div(present.constant(2))
          ).px(),
          present.key('y').sub(present.key('y').end())
          .sub(
            present.key('width').end()
            .sub(present.key('width'))
            .div(present.constant(2))
          ).px(),
        ]),
        () => ' ',
        // Also animate the scale for when one of the items is selected
        present.scale([
          present.key('width').div(present.key('width').end()),
        ]),
      ]),
      // Set the opacity if the element is animating in or out
      opacity: present.key('opacity'),
    })}>
    // The rendered object
    <div className="root"
      style={{position: 'relative', width: '90px', height: '90px'}}>
      <img style={{width: '90px', height: '90px'}} src={itemImgs[name]} />
    </div>
  </RAnimated>