v0.3.0 examples

This is an old guide to upgrade from 0.2. to 0.3.0. Please refer to the Home page to upgrade to the newest 0.4.0.*

Here are a few typical examples of old vs new API. View the differences!

Alternatively, below is the plain code version.

Normal Spring

Old:

<Spring
  defaultValue={{x: {val: 0, config: [120, 17]}}}
  endValue={{x: {val: 10, config: [120, 17]}}}>
  {style => <div style={{left: style.x.val}} />}
</Spring>

New:

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

Stagger Springs

Old:

<Spring
  defaultValue={[
    {x: {val: 0, config: [120, 17]}},
    {x: {val: 10, config: [120, 17]}}
  ]}
  endValue={this.getEndValue}>
  {values =>
    <div>
      {values.map((value, i) =>
        <div key={i} style={{left: value.x.val}} />
      )}
    </div>
  }
</Spring>

New:

<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

Old:

<TransitionSpring
  willLeave={() => ({x: {val: 100}})}
  defaultValue={{key1: {x: {val: 0}}, key2: {x: {val: 0}}}}
  endValue={{key1: {x: {val: 10}}}}>
  {values =>
    <div>
      {Object.keys(values).map(key =>
        <div key={key} style={{left: values[key].x.val}} />
      )}
    </div>
  }
</TransitionSpring>

New:

<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>