Animation in React

#1

I’ve been trying to make an animation work in React, with no success. Can someone please help. Here is the pomodoro clock I’m working on. https://codepen.io/atiyahaider/pen/bQKYjp.

I want the pointer to move to the correct time as the time decreases. It works on the first load, but fails to animate after that. I’ve searched all over the net, tried various techniques, but nothing seems to work. My guess is that the component ‘Scale’ is not rerendering the animation.

#2

This may not be helpful but instead of animateMotion try to use animate

#3

Thank you for responding. I need to animate the pointer on a curved path. How can I do that with . I don’t see any attributes to provide the SVG path coordinates.

#4

Sorry, I looked at it for a while. I’m just not familiar enough with SVG I couldn’t get it to work either.

#5

Thanks for trying! I’m still searching for more options.

#6

I made it work! I removed the animation and instead used the css style offsetDistance on the pointer.

2 Likes
#7