v0.3.0 examples

Normal Spring

<Motion
  defaultStyle={{x: 0}}
  style={{x: spring(10, [120, 17])}}>
  {style => <div style={{left: style.x}} />}
</Motion>

Stagger Springs

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

TransitionSpring

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