GSAP Naviage between timelines

[_Phillip_]

Hello again mates !

I have 3 different gsap timelines with  ~ 10s animations each, on a React website.
They work fine, as they occur one after the previous one. I need to wait for the first one to finnish to the second one to play. 
They are placed one next the previous one.

Now, I need to place them all above each other (which is not difficult using css and position absolute) like in this codepen.
The hard part is that I need to be able jump from the first timeline to the second and pause the first timeline and play the second one. 
If I scroll down when the first timeline is playing, the first animations pauses and the second plays.

Since each one is a timeline with many transitions and not a single .to(), its getting me confused about how to achieve it.
First I thought about having a master timeline and manage the navigation on the onUpdate callback, like so:

let currStep = 1;
onUpdate: (e) => {
	if (e.direction > 0) { // is scrolling down
		if (currStep == 1) {
          currStep = 2;
          firstTl.pause();
          secondTL.play();
		}
      else if (currStep == 2) {
          currStep = 3;
          secondTL.pause();
          thirddTL.play();
		}
	}
  else {
	....
	}
}

What do you think ?

Its kinda messy because it forces me to have the 3 animations (and their content) in a single react component, but it is what it is..

Thank you all !
Cheers

See the Pen vYZWgmL by GreenSock (@GreenSock) on CodePen.

[Rodrigo]

Hi,

 

I read your post a few times and checked the demo you've included but I can't really grasp what you're trying to achieve here.

 

You mention this:

22 hours ago, _Phillip_ said:

I need to wait for the first one to finnish to the second one to play.

22 hours ago, _Phillip_ said:

The hard part is that I need to be able jump from the first timeline to the second and pause the first timeline and play the second one. 

Those two statements cancel each other, is either one of them but not both. In order to achieve what you want first (wait for the first to end before going onto the second) then use scrub in your ScrollTrigger config, as your demo does. In order to achieve the second statement (pause the first when going to the second), don't use scrub and use toggleActions instead:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#toggleActions

 

Hopefully this helps.

Happy Tweening!

[_Phillip_]

Hello @Rodrigo, I am sorry, I wrote it wrong.

The desired behaviour is:
The first timeline starts, then you scroll down and the first timeline pauses, turn transparent, and the second one shows and start.
If you scroll down, the second pauses, turn transparent and the third one shows and start.
If you scroll up, the third one pauses, turn transparent, and the second one shows and play from the begining.

Thank you for the tip about using the toggleClass.
My question is if its a good approach to have a master timeline that manage the navigation between the timelines. (like on the if statement I posted)
Its the first I am using gsap, so I am clearly newbie on this.

Thank you very much 

[Rodrigo]

Yeah, you're definitely looking for a mix of toggleActions and the onEnter, onLeave, onEnterBack and onLeaveBack callbacks:

 

See the Pen LYVKWGo by GreenSock (@GreenSock) on CodePen.

 

See the Pen qBdeVJY by GreenSock (@GreenSock) on CodePen.

 

The toggleActions option will take care of play/pause/resume/reset part of the animation of each section while the callbacks can be used to fade in/out each particular section.

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#onEnter

 

Finally is important to note that toggleActions is not the same as toggleClass:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#toggleActions

 

Hopefully this helps.

Happy Tweening!

[_Phillip_]

Hi @Rodrigo, first of all thank you very much !

I did what you suggested me and it worked like a charm.
But I have an issue that I would like to share with you.
Currently I am switching the step with a Throttle function to not go through every step on a single scroll action.
I am also delaying the navigation on 1 second when you enter the scrolltrigger
Its working as intended.

But, if someone scrolls downs quickly and the second step is showing, the user goes immediatelly to the rest of the site (because the scroll leaves the master timeline).
I woul like to "force" the user to go through every step, and only then move to the other parts of the site.
I dont want to force the user to see 100% of every step, but at least to jump to every step before going to the rest of the site.
Was I clear ?

That's my master timeline code:

let mainTL: any = gsap.timeline({
      scrollTrigger: {
        trigger: section,
        start: "top top",
        end: `bottom+=900px`,
        pin: true,
        scrub: 2,
        toggleActions: "restart none none none",
        onEnter: () => {
          running = false;
        },
        onEnterBack: () => {
          currStep = 1;
          firstTl.play();
          firstLottieRef.current.setSeeker(1);
          firstLottieRef.current.play();
          secondTL.pause(0);
          thirdTL.pause(0);
          fourthTL.pause(0);
          running = false;
          setActiveAnim(currStep);
        },
        onLeaveBack: () => {
          running = false;
          firstTl.pause(0);
          secondTL.pause(0);
          firstLottieRef.current.stop();
          secondLottieRef.current.stop();
        },
        onLeave: () => {
          running = false;
        },
        onUpdate: (e) => {
          if (!running) {
            setTimeout(() => {
              running = true;
            }, 1000);
          }
          handleScrollThrottled(e);
        },
      },
    });

Could you please suggest me something to work the way I described you ?

Thank you very much once more for your help !

[Rodrigo]

There is no native way to do that, the only way we have is the Observer Plugin:

https://gsap.com/docs/v3/Plugins/Observer/

 

This demo could help you getting started:

See the Pen ExEOeJQ by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Hypnotic Digital Agency]

Thank you very much @Rodrigo! I will try my best !