Home
First of all, thanks for upgrading! 0.3.0 is a breaking change whose goal is to:
- Obliterate some confusions in the old API.
- Unlock a bunch of exciting future APIs.
- Make under-the-hood performance better.
The upgrade should be pain-free; most changes are simple conversions.
These examples and differences visualizer might be enough to illustrate the differences, but here's a more verbose list anyway.
===
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.