Skip to content

Compare: v0.3.0 examples

New page
Showing with 19 additions and 19 deletions.
  1. +19 −19 v0.3.0-examples.md
38 changes: 19 additions & 19 deletions v0.3.0-examples.md
View file
@@ -1,42 +1,42 @@
#### Normal Spring
```jsx
<Spring
defaultValue={{x: {val: 0, config: [120, 17]}}}
endValue={{x: {val: 10, config: [120, 17]}}}>
{style => <div style={{left: style.x.val}} />}
</Spring>
<Motion
defaultStyle={{x: 0}}
style={{x: spring(10, [120, 17])}}>
{style => <div style={{left: style.x}} />}
</Motion>
```

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

#### TransitionSpring
```jsx
<TransitionSpring
willLeave={() => ({x: {val: 100}})}
defaultValue={{key1: {x: {val: 0}}, key2: {x: {val: 0}}}}
endValue={{key1: {x: {val: 10}}}}>
<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.val}} />
<div key={key} style={{left: values[key].x}} />
)}
</div>
}
</TransitionSpring>
```
</TransitionMotion>
```