Continue Animation After repeatDelay

[codebeast_]

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

[ZachSaucier]

Hello codebeast and welcome to the forums! 

 

There are a couple of different things that I'd change about your animation if I were doing it. 

 

The first is that you don't need to use fromTo if you're always starting from a rotation of 0. Since that's the default, you can just use a .to instead.

 

The second is that you don't need three different timelines (you technically don't need a timeline at all, you could just use 3 TweenMax.to statements). So you can just use tl.to for each and set the start time of each .to to 0 (it's the last parameter of the call).

 

Then I'd also use a single variable for the total animation duration and calculate how fast each hand should turn based on that variable. That way you can change the entire animation's scale using that one variable and know that it's all going to be synced correctly. That also lets you not have to worry about calculating how much to rotate each time. 

 

Lastly I'd make sure to set an infinite repeat on the timeline so it continues after one full iteration ({repeat: -1})

 

Altogether it'd look something like this: 

 

See the Pen EqYLBB?editors=0010 by GreenSock (@GreenSock) on CodePen

[codebeast_]

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.

[OSUblake]

9 minutes ago, codebeast_ said:

The problem is, imagine I have 5 - 10 of these clocks on one page, there is a huge drop in performance.

 

Use images instead of SVG graphics. Animating images is super fast. Animating elements with gradients and filters is super slow. And using <use> elements is super slow.

 

[PointC]

I'd follow the advice above, but If you do want to start a timeline again without resetting the elements you can use .invalidate()

https://greensock.com/docs/TimelineMax/invalidate()

[ZachSaucier]

As Blake said, the main performance hit is animating those gradients with filters and all. That's your bottleneck, not the animation timeline. Canvas is another alternative if you don't want to use images.

 

But if you did want to use a stepped animation instead, the easiest way would be to do the same thing I did above but use a SteppedEase like so:

 

See the Pen VoZBeX by GreenSock (@GreenSock) on CodePen

[PointC]

Zach is gettin' all fancy today. 

[codebeast_]

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

 

[OSUblake]

2 minutes ago, codebeast_ said:

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

 

That's expected when you animate/change an SVG. And paints aren't entirely bad. It's more about what's being painted. Canvas/Web GL are fast, but they will repaint on every update.

[codebeast_]

Thanks @OSUblake

 

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

[OSUblake]

17 minutes ago, codebeast_ said:

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

 

You can still use a gradient, you just need to rework your HTML and SVG.

 

Create unique SVGs for each clock hand, and put each one of those SVGs inside a unique div. Absolutely position those div wrappers over your clock face, and animate the divs instead of SVGs.

 

To get rid of paints, you can set force3D: true on your animations. force3D only works with HTML elements. And you need to be careful about overusing force3D, as it will create a new layer, which can slow things down if there are too many layers.

 

 

[codebeast_]

Perfect! Thanks a lot