react-spring: Updating duration in useSpring config part way through animation causes object to move "backward"

When I update the duration via useState, animation flickers back, not to initial value though.

I think you will understand from codesandbox example. Try to click the button, once the animation is 50% done.

codesandbox example

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 18 (8 by maintainers)

Commits related to this issue

Merge branch 'master' into feat/#1163-updating-duration — committed to pmndrs/react-spring by joshuaellis 3 years ago
fix(bar): Fix BarItemProps types (#1163) — committed to cameron-martin/react-spring by eggei 4 years ago

Most upvoted comments

That error appears because of hot reloading. It’s been fixed for the next release.

Your sandbox (with the workaround) is working for me, no jumping. 😅

It’s using the SpringValue API, which lets you pass the to prop as the first argument, but you could pass { to: 500, config } instead if you find that more readable.

aleclarson on Mar 28, 2021

Here ya go

  const { x } = useSpring({
    from: {  x: 0  },
  });

  React.useEffect(() => {
    x.start(500, {
      config: { duration: customDuration }  
    })
  }, [x, customDuration])

PS: You can become my patron to support my work.

aleclarson on Mar 28, 2021