react-spring v9

CHANGELOG.md

Changes in v9

• Animated values are now instances of the SpringValue class, which gives users access to an imperative API for updating a single animated value.
• The reset and immediate props can now be a key or array of keys, instead of only a function or boolean.
• The next function passed to async to prop can now be passed any useSpring props, instead of only to values.
• The useSpring hook now supports a deps array, for updating an animation only when certain values changed.
• The useTransition hook was rewritten from scratch. (see #809)
• The useTransition hook now has a ref prop.
• The new cancel prop stops the current animation and prevents future animations. It can be a boolean, a function, a key, or an array of keys.
• Delayed updates can be cancelled by the cancel prop or stop method.
• Preceding updates can override to and from props of a delayed update.
• Many props passed to the useSpring hook are now inherited by updates from an async to prop, the set function returned by function syntax, etc. These are called "default props".
• Individual updates each get their own Promise that tracks when they either finish or get interrupted.
• The new loop prop makes it easy to create a repeating animation.
  • Combine it with the reverse prop to loop an animation back and forth.
  • Pass an object like {delay: 1000} to pause before looping each time.
• The new pause prop/method freezes the current animation until resumed.
• The API for dependency injection has changed to Globals.assign.
• Added the skipAnimation global for making all animations instant (useful for prefers-reduced-motion).
• For the web platform, there are now transform shortcuts (eg: x/y/z or scale) in the style prop. (see here)
• The config prop now supports partial updates.
• The new config.frequency and config.damping props provide more intuitive control of "springiness".
• The new config.step prop lets you round the animated value on each frame.
• The new config.bounce prop makes it easy to create an animation bounce when it hits the goal value.
• The new config.progress prop lets you decide where in an easing function to begin your animation.
• The new onProps event gives you a good spot to place a debugger statement, making it slightly easier to debug animations.
• Animated components now support arbitrary dynamic values that use the fluids package. This provides an efficient way of updating native props (eg: any style prop of an animated.div component) without needing to rerender.
• TypeScript typings were rewritten from scratch.
• Basic tests have been added, and new tests are added whenever a bug is fixed, making it easier to contribute without introducing regressions (v8 had zero tests).
• The documentation will be rewritten from scratch.
• Countless bug fixes.
• In the future, FLIP support will be added.
• Moved to a monorepo, so platform-specific packages can be installed directly (eg: @react-spring/native) and @react-spring/core can be used for custom platform support.
• ...and more probably!

intro.md

Intro to react-spring

• Animate opacity between 0 and 1 based on props.visible
• Delayed animations
• Immediate animations
• Restart an animation
• Stop an animation
• Prevent an animation until ready (eg: need to measure layout first)
• Scripting an animation
• Chaining animations
• Know when an animation starts
• Know when an animation ends
• Know if an animation is cancelled
• Know if an animation is interrupted
• Animating a composite component
• Animating in response to a click
• Gesture-based animations
• Animating to an auto height (1)
• npmjs.com/package/react-reduce-motion
• Customizing your springs (config prop)
• Prevent animating while desired animation is unknown (eg: layout must be measured first)
• Other hooks
  • useSprings
  • useTransition
  • useChain
  • useTrail
• Render props
  • Spring
  • Transition
  • Trail

loop.md

The loop prop

Using loop: true is identical to loop: { reset: true } in that both will begin at the from prop. If no from prop exists, then the current from value is used.

When the loop prop is an object or object-returning function, the object is merged into the original props. For example, if the original props contain { delay: 1000, loop: {} }, then the loop animation will inherit the delay prop. The only props not inherited are reset and default.

table-of-contents.md

• tldr
• the basics
• how to