codebeast_

Perfect! Thanks a lot

Thanks @OSUblake Actually, the stepping and removing gradient improved the animation practically. It's back at 60fps.

Haha @PointC Thanks everyone for the perf tip. I removed gradients from the rotating hands https://codepen.io/codebeast/pen/gNNaRp?editors=0010 @ZachSaucier the SteppedEase examples visually works but when you look at the the paint debugger, all the hands are still repainted every second https://codepen.io/codebeast/pen/rXBrjW?editors=1010

Hi @ZachSaucier Thanks for the quick help. Also thanks for the tips. The problem is, imagine I have 5 - 10 of these clocks on one page, there is a huge drop in performance. One way I could optimize is to make sure the minute and hour hand don't rotate until after 60 and 60*60 seconds respectively. This way repainting is reduced to improve performance. My original pen only repaints the minute hand after a cycle (say 60sec), your example repaints the minute hand after every 1sec. This was why I went with the repeatDelay originally.

Hi, 1. I have a second hand of a clock rotating for 60 seconds 2. I have a minute hand of a clock that should rotate 360/60 after every 60 seconds. The problem is I am using reapeatDelay to delay the minute hand for every 60 seconds but when it plays again, it resets back to the original position 0deg. How do I make the rotate animation continue from where it stopped? Here is a pen https://codepen.io/codebeast/pen/gNNaRp In the pen above, I changed the timing from 60sec to 5sec so you can see what's going on faster.