play function in timeline for x seconds

[pils]

Hi, i have found a function that creates a random shake effect. The effect is now endless but i want to use this function in my timeline for a x amount of seconds. See codepen for the shake effect, below is kinda how i want it to work.

 

function Tween(){
  var T = TweenLite.to(".circle",0.02,{x:R(-10,10),y:R(-10,10),scale:R(1.1,0.9),rotation:R(-10,10),ease:Sine.easeInOut,onComplete:Tween})
};

function R(max,min){
  return Math.random()*(max-min)+min
};

var tl = new TimelineLite();

tl.add(Tween)
  .to('.circle', 1, {scale:50, y: -30}, "start+=0.5")
  .from('.circle-2', 0.3, {opacity: 0.0, scale:10}, "start+=0.6")
  .to('.circle-2', 0.6, {x:100, ease: Elastic.easeOut}, "start+=1.25")
  .from('.blokker', 0.6, {opacity: 0.0, x:15, ease: Elastic.easeOut}, "start+=1.4");

 

So this adds the shake effect to my .circle class but obviously this keep going and going. Just like the rest of my timeline i want this effect to last for a x time and then move on with playing the rest of the timeline.

See the Pen rzJMvO by luffyy (@luffyy) on CodePen

[Carl]

The solution here is to create a function that creates a random shake timelime that you can place in your main timeline.

This seems very similar to Mikel's situation where he needed different sequences of random lip movement.

 

Please see my post and demo here to see how the random animations were nested into a parent timeline: