Chaining timelines

Hey,

is there any way to chain timelines ? Here would be a use case :

One timeline is doing some stuff and when ended, would call another timeline that would be infinitely repeated (trying to have an introduction animation on svg objects, once introduction is done i’m trying to have an infinite floating effect on each svg object).

Thanks for your ideas / tips !

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

I have 2 timelines setup like this:

Timeline 1:

Timeline2 (set repeat to -1):

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

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

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

Thanks a lot for this !

I found about the getTimeline function this weekend and it’s a gamechanger to be able to create the timelines with bricksforge visual tool and control them directly from JS :slight_smile:

1 Like

That’s what made me fall in love with Bricksforge as well, visual tools for everything but always accessible through code to take it even further in case some option doesn’t exist or hasn’t been implemented yet :slight_smile: