[How to create an animation timeline and start it when needed?]

Hello everyone,

I started using gsap for a couple of days and I have a task I can't wrap my head around.

I have an overlay that is displayed whenever there is a loading event, like changing pages or making an ajax request.

Inside the overlay I have 2 text elements. I want to animate both of them.

What I was thinking of doing, is create a timeline at startup with all the animations, and only play it when the overlay is shown (a class is added to the html element).

Here's a pseudo code of how I would like to have it work

const tl = gsap.timeline();

const animation1 = el1.from({...});
const animation2 = el2.from({...}, '+=0.5');

tl.add(animation1);
tl.add(animation2);

// at this stage, the timeline is stopped
.
.
.
// when I click a button, I show the overlay and I play the timeline
.
.
.
// when I close the overlay, I stop the timeline and reset
.
.
.
// repeat click/close overlay

Is it possible to do so?

I would use the same technique for another animation that is triggered by ScrollTrigger.

I have 8 sections on my home page, and whenever I scroll to a section, I want that section's header to animate in, so I thought about creating these reusable timelines that I can play and pause whenever.

 

Thank you