2

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.

MeanMan
  • 1,040
  • 10
  • 25

1 Answers1

2

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) 
  })
Gaël S
  • 1,598
  • 6
  • 15