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

[dlsmoker]

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

[elegantseagulls]

Hi @dlsmoker,

 

I think what you're missing the the pause play functionality. So something like:

const tl = gsap.timeline({ paused: true });


// inside button click function
tl.play();


// inside close overlay function
tl.pause(0);

As for ScrollTrigger, that functionality is built into it. So animations are automatically played/paused there. I'd highly recommend looking over the docs, and learning center:
https://greensock.com/docs/

https://greensock.com/learning/