Trying to use ScrollTrigger after the completion of previous ScrollTrigger

[Nabeel_dechains]

Hello, I am trying to use two scrollTriggers in the following codepen. First one is to reveal the green section after the loader basically, and second one will be for the horizontal scrolling of sections.

 

The green section is revealing fine but I can't seem to make the horizontal scrolling work, Try uncommenting the code and you will see the issue.

 

Any ideas on how I can make this work?

 

See the Pen wvRBZma by Nabeel-dechains (@Nabeel-dechains) on CodePen

[mvaneijgen]

Hi @Nabeel_dechains welcome to the forum!

 

If you want things to happen right after each other it will be much easier if you create one ScrollTrigger and add all the animations to that ScrollTrigger. You could use two, then on complete of the first one create the second one, but having just one is so much more easy.

 

I've just move the tween from your second ScrollTrigger to the frist one and tweaked the timeline a bit. I've just set a fixed value of 6000px, but you can change that to what ever you like. The main thing is that the frist tweens I've given a duration of 1 second and the horizontal section a duration of 8 seconds. ScrollTrigger doesn't really work with durations, but it does matter how long something is in relation to another tween, so in this example (for simplicity) the horizontal section will take up 80% of the scroll distance and the rest 20%.

 

Hope it helps and happy tweening! 

 

See the Pen NWePVPd?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Nabeel_dechains]

Thank you for quick reply, It pretty much solved the problem but the scrollTrigger on leaving is causing an extra scroll for some reason. I can't seem to figure out why that is?

[Rodrigo]

3 hours ago, Nabeel_dechains said:

Thank you for quick reply, It pretty much solved the problem but the scrollTrigger on leaving is causing an extra scroll for some reason. I can't seem to figure out why that is?

Hi,

 

The problem is your loader container. You are giving that a huge scale:

.to(".loader__container", {
  scale: 500,
  ease: "none",
  duration: 1
})

The issue is that the loader setion (the parent of that particular element) has a default overflow property and an absolute position, without any particular top/left position:

<section class="loader">
  <div class="loader__container">
    <h1>LOADER</h1>
  </div>
</section>

.loader {
  position: absolute;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  width: 100%;
  height: 100vh;
  background: black;
}

So obviously the now humongus loader container uses a lot of space in your document which leads to all that scrollable area. Is always a good idea to test without ScrollTrigger and then without any GSAP animations whatsoever. By commenting out the ScrollTrigger part I was able to spot the problem and isolate the cause:

See the Pen eYbNYJw by GreenSock (@GreenSock) on CodePen

 

Keep in mind that absolutely positioned elements are taken out of the document's flow, so setting the absolute element to be at top/left zero fixes the issue. If you remove the comment in lines 20-22 of the CSS you'll see it working as expected.

 

Hopefully this helps.

Happy Tweening!

[Nabeel_dechains]

Ah! I see, my bad. Thank you for the help, this solved the issue

[Nabeel_dechains]

Hello, I am trying to fake pin the panel 3 in the above scenario by using containerAnimation but scrollTrigger's start and end position are not in the correct position below is the code pen:

See the Pen WNLbWzw by Nabeel-dechains (@Nabeel-dechains) on CodePen

Any help would be appreciated.

[Rodrigo]

Hi,

 

The problem is that the container for that element is scaled down. I don't know if the rotation adds up to the problem as well, but the scale definitely does. If you remove it you'll see it working as expected.

 

If you want to keep those initial animations (scale and rotation) scroll-based by using ScrollTrigger's scrub property, then you'll have to create a different approach mainly in the HTML/CSS spectrum. What I would do is have only the first panel rotated and scaled down and in the horizontal container add a first panel that has the screen dimensions (height/width) but that is completely transparent. Then you can move the horizontal stripe and the first panel at the same time using a timeline and have the container animation working as expected.

 

Here is a fork of your codepen:

See the Pen gOZadPK by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!