scrolltrigger horizontal section

[battleaxe10000]

Hi,

I'm new here and I hope I do this correct ?

 

In my codepen I think you can see what I'm trying to do. The page scrolls vertically until it gets to the projects-section where the pages starts scrolling horizontally until the last contact-section. Now, everything works, but I'm not happy with the result.

1. When you scroll down, and leave the last project, the page kind of takes a "shortcut" down to the contact part. In reverse the same happens when you leave "projects" and enters "about". I believe this has to do with the scrub-function(?), but is there a way to get around this?

 

2. The horizontal part scrolls smooth, but too fast I think. Help please.

 

3. As mentioned, the horizontal part scrolls smooth, but not the vertical. Can I wrap the whole thing in another scrollTrigger and add a scrub, or is there a better way to get smooth scrolling through the whole page?

 

I know it was a lot, but if I just could get a hint on at least one question I would be super thankful.

 

Cheers

See the Pen GRjVxQB by battleaxe (@battleaxe) on CodePen.

[ZachSaucier]

Hey battleaxe10000 and welcome to the GreenSock forums.

 

15 hours ago, battleaxe10000 said:

1. When you scroll down, and leave the last project, the page kind of takes a "shortcut" down to the contact part. In reverse the same happens when you leave "projects" and enters "about". I believe this has to do with the scrub-function(?), but is there a way to get around this?

You're right, it is due to the scrub. The only way to fix this while keeping the scrub is if you use smooth scrolling on the entire page (using scrollerProxy to hook it up). 

 

15 hours ago, battleaxe10000 said:

2. The horizontal part scrolls smooth, but too fast I think. Help please.

The speed is determined by

1. The total distance that you need it to travel (not really change-able unless you didn't want full screen sections)
2. The total distance of your ScrollTrigger.
3. The scrub value that you have.

15 hours ago, battleaxe10000 said:

3. As mentioned, the horizontal part scrolls smooth, but not the vertical. Can I wrap the whole thing in another scrollTrigger and add a scrub, or is there a better way to get smooth scrolling through the whole page?

That's another reason to use smooth scrolling.

[battleaxe10000]

Thank you so very much