Continuing a loop on a tween

[bromel]

Good evening all,

 

I have been experimenting with GSAP (which is awesome!!) and I am trying to create a loading animation for which can be viewed here: 

 

The effect does work, but I am wanting to keep the spinner, spinning clock-wise on 'loadout' (when the button is pressed). due to the method for which I have the animation working I was wondering if I could still have the animation in reverse but keep the rotation property going in the direction that I want it.

 

initially I had in mind the use of:

 

tlspin.kill({rotation:true})

 

in an effort to rebuild the animation again, but this did not work, out of interest is there a way to reinstate a tweens property once it has been killed? or is there another way of creating the same effect.

 

many thanks

 

Bromel

See the Pen pvvPyW by w9914420 (@w9914420) on CodePen

[Halcyon]

I'm a bit confused. So you only want them to scale in and out, but continue both rotations?

 

Like this?

See the Pen GggxKm by maelfyn (@maelfyn) on CodePen

 

Side note: timelines are great, but I personally think they're better for linear timelines rather than dynamic, simple animations. Just my opinion

[bromel]

Hi Maelfyn

 

You hit the nail on the head, this is exactly what I was trying to achieve opinions are always welcome . Im not too familiar with JS but I understand what you have done and now I have something to study. My immediate thought is that by your method, I could easily create libraries of tweens for one element. Thank you very much for your help.

 

regards

 

bromel