v0.4.0 examples

Motion

<Motion
  defaultStyle={{
    // you might/might not have used `left: spring(0)`. That's no longer supported.
    left: 0,
  }}
  style={{
    left: spring(10, {stiffness: 120, damping: 17}),
  }}>
  {style => <div style={{left: style.left, border: '1px solid'}} />}
</Motion>

StaggeredMotion

<StaggeredMotion
  defaultStyles={[
    {x: 0},
    {x: 10},
  ]}
  styles={this.getEndValue}>
  {values =>
    <div>
      {values.map((value, i) =>
        <div key={i} style={{left: value.x}} />
      )}
    </div>
  }
</StaggeredMotion>

TransitionMotion

<TransitionMotion
  willEnter={() => ({x: 0})} // triggered by key3
  willLeave={() => ({x: spring(100)})} // triggered by key2
  defaultStyles={[
    {key: 'key1', style: {x: 0}},
    {key: 'key2', style: {x: 0}},
  ]}
  styles={[
    {key: 'key1', style: {x: spring(10)}},
    {key: 'key3', style: {x: spring(10)}},
  ]}>
  {values =>
    <div>
      {values.map(({key, style}) =>
        <div
          key={key}
          style={{left: style.x}} />
      )}
    </div>
  }
</TransitionMotion>