Chaining timelines

How To
2

Yes there is :slight_smile: Here is a very basic example

I have 2 timelines setup like this:

Timeline 1:

image
image1899Ɨ471 30.3 KB

Timeline2 (set repeat to -1):

image
image1877Ɨ532 24.6 KB

Right clicking on a timeline, you can copy the timeline ID:

image
image284Ɨ206 3.79 KB

Now add a new event, I used on Pageload but could be whatever:

image
image1879Ɨ490 28.7 KB

In the JS Action, we add the following:

//Get our two timelines based on the IDs we copied from the timelines panel
const tl1 = await getTimeline('5b736b2a-6a64-195c-3a40-40680ab2a8f3');
const tl2 = await getTimeline('2fbf37c3-cba7-ec96-2277-5e518c7d0b0b');

//Create a new blank master timeline with any parameters we want like repeating it indefinitly
const master = gsap.timeline({paused:true, repeat: -1});

//Add our timelines to the master timeline and play it
master.add(tl1.tl.play());
master.add(tl2.tl.play());
master.play()

Timeline 1 transforms it on the x-axis, timelin 2 scales it. So whenever we reload, it will transform the object on the x-axis and then repeat the scaling animation indefinitely.

1 Like