Random points in each repeat of animation

[Apollo13 Themes]

Hello:-)

 

I wanted to know is there any way to reuse same timeline to animate to random points at each replay?

 

On each event I would like to make some animation that has mid animation random each time.

 

This is what I came with(simplified code):

var tl = new TimelineLite(),
	element = $('#element');

function onEvent(){
	tl.kill(); //I don't know if this best way to clear whole time line
	tl = new TimelineLite();

	var rotation = randomInt(-45,45);

	tl
		.to(element, 0.6, {rotation: rotation })
		.to(element, 0.2, {autoAlpha:0});
}
    
//I have other animation that returns it to start points on different event

So in this animation element is rotated by different number each time event occurs and then hidden. Different animation returns it to start points.

 

I wonder if I can achieve same thing without creating new timeline each time. And if this is not possible, could you tell me if this is most efficient way of doing things and I wont use all memory after while ?

 

With kind regards.

 

See the Pen Lppdxg by anon (@anon) on CodePen

[Diaco]

Hi Apollo13 

 

you can use .clear()  : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/clear/

function onEvent(){
 tl.clear()
   .to(element, 0.6, {rotation: randomInt(-45,45) })
   .to(element, 0.2, {autoAlpha:0});
}

or  set .autoRemoveChildren : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/autoRemoveChildren/

var tl = new TimelineMax({ autoRemoveChildren:true });

function onEvent(){
tl.to(element, 0.6, {rotation: randomInt(-45,45) })
  .to(element, 0.2, {autoAlpha:0});
}

See the Pen KddoLZ by MAW (@MAW) on CodePen

[Apollo13 Themes]

Hello again.

 

Thanks for both answers. I didn't know about autoRemoveChildren.

However i tried clear() earlier and it didn't work for me. Strangely it works now fine!

Must be my mistake.

 

Thanks once again for quick help, and have a nice day!