Search code examples
reactjsreact-spring

change state on completion of react spring animation,

Currently I have a use case, where the animation is triggered on a state change which gets initiated by a click action. Things work fine when I do a click for the first time, if I continuously click on the same link, the animation doesn't trigger, which I believe is because of the state not changing.

code sand box

In the above code sandbox clicking on "coastal shipping" first time triggers the animation, but a subsequent continuous click doesn't trigger the animation.

Solution

  • Try using onRest function to reset the state:

    const props = useSpring({
    to: [{ opacity: 1, color: '#ffaaee' }, { opacity: 0, color: 'rgb(14,26,19)' }],
    from: { opacity: 0, color: 'red' }, 
    onRest : () => set(null) 
  })