Pausing and resuming timelines

[JPM82]

I have an opening sequence in my hero section I've declared as homeHeroTl.  I want all other animations to be paused while this plays, and then unpause when it's finished.  I can't figure out how to do this!  The following section is fairly simple : each element animates in as the user scrolls.  The problem I'm running into is that on mobile, where both sections are visible, the second section will start to animate.  I want the animation to wait until the homeHeroTl has finished.  How can I do this?

Here is my code:

//Regsiter Scroll Trigger

gsap.registerPlugin(ScrollTrigger);

let homeContent = document.querySelectorAll(".home__content");

if (homeContent.length > 0) {

homeContent = homeContent[0].children;

}

 

console.clear();

 

const heroHomeTl = gsap.timeline({

defaults: { ease: "ease: expo.out" },

});

 

heroHomeTl

.to("html", { overflowY: "hidden" })

.to(".hero--home__overlay h2", {

opacity: 0.85,

duration: 1,

})

.fromTo(

".hero--home",

{

ease: "power2.in",

"clip-path": "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)",

},

{

duration: 1.2,

ease: "power2.in",

"clip-path": "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",

},

"first"

)

.to(

".hero--home__kicker",

{

"clip-path": "polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%)",

x: 0,

duration: 1,

},

"first+=.8"

)

.to(

".hero--home__headline",

{

"clip-path": "polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%)",

x: 0,

duration: 1,

},

"first+=1.1"

)

.to("html", { overflowY: "visible" });

 

console.clear();

 

Array.from(homeContent).forEach(function (item, i) {

item.classList.add("home-item");

 

ScrollTrigger.batch(".home-item", {

ease: "back.out",

onEnter: (elements, triggers) => {

gsap.to(elements, { visibility: "visible", x: 0, stagger: 0.35 });

},

});

 

const teamImg = gsap.timeline({

scrollTrigger: {

trigger: ".team",

start: "top center+=40%",

},

defaults: { ease: "back.out", duration: 1 },

});

 

teamImg.to(

".team",

{

visibility: "visible",

y: 0,

},

""

);

});

console.clear();

I didn'

[GreenSock]

If you'd like some help, please just provide the most minimal demo possible (like in CodePen) and we'd be happy to answer any GSAP-specific questions. 

 

If you want one timeline to play after another, there are several ways to do it: 

1. pause() it and then in an onComplete on the other timeline, play() it. 
2. Put them both into a master timeline, sequenced. 

If you've got ScrollTriggers attached to the animation(s), that is more tricky because of course the ScrollTrigger will want to control the animation but it sounds like maybe you want to prevent that under certain conditions(?). Again, a minimal demo will go a long way toward getting you a solid answer