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
