Modify animations within the given children, but only the animations created by the hook API (eg: useSpring) or renderprops API (eg: <Spring>) are affected. Animations created with new SpringValue() or new Controller() are unaffected.

<SpringContext cancel={true}>
  <App />

The following props are supported:

  • cancel?: boolean
  • config?: SpringConfig (see configs for more information)
  • immediate?: boolean
  • pause?: boolean

The SpringContext component can be used anywhere.

The most common use case is pausing or finishing animations on a page while it is temporarily invisible to the user. For example, the user may navigate away from a modal with animated content that stays mounted when hidden.

Nested context

Descendants of a SpringContext component can use SpringContext to selectively override any props forced by another SpringContext.

In the example below, only Page2 can play its animations. Pretend this element tree is rendered more dynamically, and this code is a static representation.

<SpringContext pause={true}>
  <Page1 />
  <SpringContext pause={false}>
    <Page2 />
  <Page3 />

Every nested SpringContext inherits the values of the nearest SpringContext ancestor.