How do I update a "to" property config between steps?

[varunarora]

Hi!

I am doing a multi-step animation on the same component.

However, after the first step ends, I wish to change the animation config on the component (e.g. duration) on the component. For example, the first step should take 1 second, and the second should take 5 seconds.

Even though this seems like a very simple use case, I have read and re-read and re-read the docs, and can't find a way to do this. I feel useChain or useTransition is not correct for this, since all the springs and steps for a simple component are declared together. Either way, I feel really lost.

Could you kindly point me in the right direction?

[Aaron-Storm]

In your case I would just simply use the imperative API. This way you can pass an individual config for each animation / spring.

[varunarora]

Thank you so much for your thoughts, @Aaron-Storm!

Is this the only page that discusses the Imperative API? https://react-spring.io/common/imperatives-and-refs. If so, is any other documentation on the Imperative API. This one is completely un-understandable.

[Aaron-Storm]

No worries, I understand it may seem a bit hard to grasp at the start.
The controller section https://react-spring.io/classes/controller helps to give a better understanding of the API methods.
I have spent my fair share of time lately playing around with the api so in case you have any questions feel free to reach out.

[varunarora]

That's so very kind of you, @Aaron-Storm! Thank you so much. I also found this (https://aleclarson.github.io/react-spring/v9/#Imperative-updates) and hoping it comes to some use.

[ziyamamedov]

I faced the same problem, and couldn't find any example anywhere, but this seems to work:

  //  "@react-spring/web": "^9.7.4",
  const springRef = useSpringRef()
  const spring = useSpring({
    ref: springRef,
    from: {transform: 'scale(1)'},
  })
  
 const onClickElem = () => {
  springRef.start({
      to: [
        {
          transform: 'scale(0.6)',
          config: {duration: 1000}, // You can just pass config inside the step object!
        },
        {
          transform: 'scale(1)',
          config: {duration: 5000},
        },
      ],
    })
  }