Changing tween properties when using repeat

[fastekdesign]

Hello, I'm very new to GSAP.

 

It there a way to dynamically change the tween properties on every repeat?

 

On my codepen url, I want the .red tween to behave more like the .blue tween, but use the repeat.

 

The start_blue()  resets some properties of the tween and uses dynamic values for rotate and duration then calls itself via onComplete. 

 

The start_red() is a simple tween that repeats the same animation.

 

 I want to use the repeat, but need to have the properties like rotation, duration be set dynamically on every iteration of repeat.

 

Is this possible using repeat? or is there a better method.

 

My goal is to animate something like a water fountain where there are many particles, each independent of one another as far as timeline. I want a slider to increase or decrease the number of particles and emit them onchange/ onUpdate ..ect.

See the Pen yVvvVM?editors=1111 by anon (@anon) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

If you are changing values on each iteration its easier and just as efficient to create a new tween.

Here is a little example that shows how a tween can pass it's target into a function onComplete that generates a new tween.

function randomTween(element){
  TweenLite.to(element, Math.random() * 3, {x:Math.random() * 200, y:Math.random() * 200, ease:Linear.easeNone, onComplete:randomTween, onCompleteParams:[element]})
}


randomTween(document.querySelector(".red"));
randomTween(document.querySelector(".blue"));

http://codepen.io/GreenSock/pen/zoRWpV?editors=1010

 

 

[fastekdesign]

Thanks. Very very powerful.