Jump to content
Search Community

Repeating Overlapping Timelines and Random Properties

celli test
Moderator Tag

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

Hi, I have a simple slow animation with various circles moving around, and I am using 3 timelines each at the same length to get the effect I was looking for--to give the explosion, opacity, and rotation. It is repeating, but every time it repeats it will display the dots in the same way, however when I refresh the page it will render the dots in a different way, using my RANDOM properties.


1. I wonder if there is a way to have it repeat, but every time it repeats, it refreshes the properties so it will respect the randomness every cycle ? (position, size, and opacity would be different for each time it repeats)

2. I am also wondering if I can stagger these 'master timelines' ? So that the 3 timelines are actually a 'master timeline' together as a unit, but when it repeats it is still playing the first master timeline and overlaps the second master timeline which is the repeating timeline... Is this possible ?



See the Pen GJmeWX by celli (@celli) on CodePen

Link to comment
Share on other sites

Thanks for the demo. Very nice.


I think this will do what you want

//some pertinent code
var master = new TimelineMax({onComplete:onComplete});
tlexplosion = baBOOM();
master.add(tlexplosion, 0)
.add(tlRotationControl, 0)
.add(tlOpacityControl, 0).timeScale(2);

//this is the important part
function onComplete() {

Take a peek here: http://codepen.io/GreenSock/pen/YXQNqE?editors=001


The basic idea is that the baBOOM() function returns a new timeline.

Every time the master repeats we clear tlexplosion and populate it with a NEW timeline that baBOOM() creates.


master contains all three timelines so it is easy to pause and play the entire thing if you need to

  • Like 2
Link to comment
Share on other sites

I love that Carl, thank You! One question:


I see we are using an onComplete() function to 'replay' the animation... is there a way to stagger them so that the next random animation overlaps with the first ? So it's kinda like onComplete("-=.5") ... is that even possible, or maybe there is another way rather than onComplete ?

Link to comment
Share on other sites

Well sort of but you can't have multiple explosions going on unless you generate new divs for each explosion.

You could have 2 groups of divs and alternate explosions on each group.

That will take some re-organizing of your code but its totally possible.


Here is a demo that shows how to create a few "random" timelines and cycle through them




I think what you may need to do is have your rotation and opacity timelines repeat infinitely inside master and then every 2.5 seconds call a function that places a new explosion where the playhead currently is in master like

function nextExplosion () {

   master.add(nextExplosion(), master.time())
  • 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.
  • Create New...