Jump to content
Search Community

Vertical split slider, scrolltrigger & scrollsmoother issue

c0c0t3 test
Moderator Tag

Recommended Posts

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!

Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...