Help with Pomodoro Clock animation (Buggy animation)

Help with Pomodoro Clock animation (Buggy animation)


Hi guys, I’ve got the basic functionality down for the Pomodoro Clock project (I think). Here’s the link :

But the animation is super buggy when I pause/reset it and I’m not sure how to fix it. To see it, just click the -5 to change it to 5 minutes. Hit start, pause and it looks fine. But if you try to resume it the fill animation goes wonky and blinks, same issue with reset.

Any ideas?


Anytime you set a timer in JS, you have to stop the timer, too. setinterval() returns a sort of ID that you can use to cancel the timer, which you will need to do when you pause.

var timer = setInterval(function doAThing() {...}, 1000);

// when pausing...


I think that the way you have it right now, you’re creating multiple timers, and that’s why your animation looks wonky.


Hmm, I’ll try to redo the whole thing tomorrow. I was thinking of just pulling a Niantic and disabling the buttons once the timer has started but that’s less fun…