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 

See the Pen gNNaRp?editors=0010 by codebeast (@codebeast) on CodePen

@ZachSaucier the SteppedEase examples visually works but when you look at the the paint debugger, all the hands are still repainted every second 

See the Pen rXBrjW?editors=1010 by codebeast (@codebeast) on CodePen

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 

In the pen above, I changed the timing from 60sec to 5sec so you can see what's going on faster.

See the Pen gNNaRp by codebeast (@codebeast) on CodePen