v0.4.0 examples

Motion

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

StaggeredMotion

<StaggeredMotion
  defaultStyles={[
    {x: 0}, // same comment as `Motion`'s `defaultStyle` above.
    {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={{
    key1: {x: 0},
    key2: {x: 0},
  }}
  styles={{
    key1: {x: spring(10)},
    key3: {x: spring(10)},
  }}>
  {values =>
    <div>
      {Object.keys(values).map((key) =>
        <div
          key={key}
          style={{left: values[key].x}} />
      )}
    </div>
  }
</TransitionMotion>