Full details 0.3.0's changes

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

(If you're curious, here are the reasonings for the changes)

1. Spring is now called Motion and TransitionSpring, TransitionMotion.

2. For Spring (now Motion), endValue has been renamed to style and defaultValue, to defaultStyle. For TransitionSpring (now TransitionMotion), they're styles and defaultStyles respectively.

3. endValue(s) (now style(s)) and its default counterpart no longer recursively animate nested values in the collection.

The format is now a flat {key: animationConfigurationForASingleValue}. For example, if you had

{mouse: {val: [10, 20], config: [120, 17]}}

This should now be something along the line of

{mouseX: {val: 10, config: [120, 17]}, mouseY: {val: 10, config: [120, 17]}}

Since this is a bit verbose, see point 4.

4. {val: myValue, config: myConfigArray} now becomes something opaque returned by the new mandatory spring helper:

<Spring endValue={{myProp: {val: 10, config: [120, 17]}}}>...

into

<Motion style={{myProp: spring(10, [120, 17])}}>...

5. No longer need to read myProp.val in render!

myProp will directly give you the interpolated value. We strip out the .val stuff under the hood for you. For a style prop of {a: spring(1), b: spring(2)}, you get the interpolated style of, say, {a: 0.4, b: 0.6}.

6. Spring's endValue (now Motion's style) no longer support an array nor a function.

If you were passing an array of configuration, switch to creating an array of Motions by your own mean instead. It's the same thing.

If you were passing a function that that accepted 0 argument, simply inline the code in your render, then see previous sentence.

If you were passing a function that accepts a prevValue as argument for staggering animation, there's now a dedicated StaggeredMotion component. It accepts defaultStyles and styles, the latter accepting a function that returns an array.