how to randomise timing of repeated animation

[robwebb364 0 Likes (Newbie)]

The codepen has two black rectangles which appear and then disappear.

 

One has an onComplete function which randomises the time variable,

but this does not work.. the timing remains the same.

 

How might one do this?

Presumably we need to stop the repeat, reset the time, and restart it?

 

Thanks for help.

See the Pen joGCh by robertwebb364 (@robertwebb364) on CodePen

[robwebb364 0 Likes (Newbie)]

think I have figured this out, using the tween.timeScale() command to vary the speed

 

now the square on the right blinks at a varying rate

See the Pen giBnp by robertwebb364 (@robertwebb364) on CodePen

[Carl 9,754 Likes (Superhero)]

Hi and thanks for providing the demos.

 

Having 2 separate timelines is definitely a more manageable approach. Otherwise you would have to target the tween inside the timeline and change its duration repeatedly. Using the time variable as the duration and changing it repeatedly is not sufficient as that only gets read ONCE when the tween is created.

 

Also, please add a console.log("timerand()") to your timerand() function. You will see that it only fires once when the page first loads in your latest pen.

 

Note you need to make the following change:

 

bad:

tl.to("#p2", time, {opacity:1, ease:Power1.easeIn, onComplete:timerand()}) //do not use () this forces the function to be called when the tween is created

 

good:

tl.to("#p2", time, {opacity:1, ease:Power1.easeIn, onComplete:timerand}) //this passes a reference to the timerand function to the onComplete callback

 

BTW, that is a very common mistake. Nothing to worry about.

 

Here is a revised version that has a single repeating timeline that changes its timeScale() when it repeats:

 

var tl = new TimelineMax({repeat:-1});
tl.to("#p2", time, {opacity:1, x:200, ease:Power1.easeIn, onComplete:timerand})

function timerand(){
  console.log("timerand()")
  var time=(Math.floor(Math.random()*(2 - 0.5 +1))+ 0.5);
  tl.timeScale(time)
}

 

http://codepen.io/GreenSock/pen/DsBof

[robwebb364 0 Likes (Newbie)]

thanks, that's useful