Vertical split slider, scrolltrigger & scrollsmoother issue

[c0c0t3]

Hello,

I'm pretty new with gsap. When I scrollsmoother is activated, it's like the "viewport" is being reduced when I scroll down.

Behavior expected : 

See the Pen VwVdBBw by amazingweb (@amazingweb) on CodePen

 

 

The code only works in desktop for now (>991px)

See the Pen ExOREMJ by amazingweb (@amazingweb) on CodePen

[Rodrigo]

Hi @c0c0t3 and welcome to the GreenSock forums!

 

You have two issues. First in your CSS you have these:

.vertical-sections--wrapper-wrapper {
  z-index: 2;
  height: 400vh;
}

.vertical-sections--wrapper-wrapper.for2 {
  height: 200vh;
}

.vertical-sections--wrapper-wrapper.for3 {
  height: 300vh;
}

.vertical-sections--wrapper-wrapper {
    z-index: 2;
    height: 300vh;
}

Those create the separation between the elements because of the height of that container nothing more. You can completely remove GSAP, ScrollTrigger and ScrollSmoother and the result is the same.

 

Then you have your start and end points:

start: "top 0%",
end: "bottom 100%",

That basically means that the ScrollTrigger instance will start when the top of the element reaches the top of the viewport and will end when the bottom of the element reaches the bottom of the viewport. Naturally that element tends to be 100vh which means that the start and end point happen at the same time.

 

Here is a fork of your codpen:

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

 

Hopefully this helps.

Happy Tweening!

[c0c0t3]

Thank you it helped me a lot !