Jump to content

Apollo13 Themes

Random points in each repeat of animation

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



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);

		.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

Link to comment
Share on other sites

  • Solution

Hi Apollo13  :)


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

function onEvent(){
   .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

  • Like 3
Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.