Animating a spring configuration

[mattrossman]

Is it possible to animate the configuration itself for a spring? For instance, have a spring that smoothly transitions between a loose and tight configuration (without re-renders)?

[aleclarson]

In v9, something like this should work:

const { tension } = useSpring({
  from: { tension: 100 },
  to: { tension: 200 },
  loop: { reverse: true },
  onChange({ tension }) {
    x.animation.config.tension = tension
  }
})

const { x } = useSpring({ ... })

[mattrossman]

Cool, that works :) I didn't know you could access and modify the .animation.config with that dot syntax, it would be helpful to have that explained in the docs.

It would also be really handy if you could simply use a spring for the config, e.g.:

const { tension } = useSpring({
  from: { tension: 100 },
  to: { tension: 200 },
  loop: { reverse: true }
})
const { x } = useSpring({
  config: { tension },
  ...
})

[aleclarson]

I could be wrong, but I think it's a rare enough need that it's not worth bloating the package with proper support. And manipulating .animation.config directly is typically unnecessary (unless you're animating the config), so it's probably not worth documenting.