ScrollTrigger - Smooth Scroll with Horizontal Scroll section

[DonDraper]

Hi guys,

 

can you help me with this script?

I am using this codepen for horizontal scroll in a certain section:

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

It works fine, however i'm already using this portion of code for smooth-scroll and adding this code breaks it:

 

//CSS
#viewport {overflow: hidden; position: fixed; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0;}
#scroll-container { position: absolute; overflow: hidden; width: 100%;}

//Smooth Scroll
const container = document.querySelector("#scroll-container")

let height
function setHeight() {
  height = container.clientHeight
  document.body.style.height = height + "px"
}
ScrollTrigger.addEventListener("refreshInit", setHeight)

gsap.to(container, {
  y: () => -(height - document.documentElement.clientHeight),
  ease: "none",
  scrollTrigger: {
    trigger: document.body,
    start: "top top",
    end: "bottom bottom",
    scrub: 0.8,
    invalidateOnRefresh: true
  }
});

 

Can you guys help me to fix it?
I would need them both to work.

 

Thanks!

See the Pen NWegJGa by jg-webdesign (@jg-webdesign) on CodePen

[DonDraper]

Adding pinReparent to horizontal scroll script make it works.
But there is still a problem with the trigger start point due to smooth scroll.

 

gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: "none",
  scrollTrigger: {
    markers: true,
    trigger: ".flow-chart-container",          
    pin: true,

  pinReparent: true,

    scrub: 1,
    snap: 1 / (sections.length - 1),
    end: () => "+=" + document.querySelector(".flow-chart-container").offsetWidth
  }
});

 

Can you help me?

[Rodrigo]

Hi @DonDraper and welcome to the GreenSock forums!

 

That most likely has to do with the calculations being made for your smooth scroll functionality and the pin space added by GSAP in order to pin the horizontal section.

 

Maybe try using the refresh event handler to update or re-create your smooth scroll:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.addEventListener()

 

Also maybe take a look at this codepen by @OSUblake

See the Pen QqPqbN by osublake (@osublake) on CodePen

 

Unfortunately we don't have the time resources to provide this type of help, especially since GSAP already has a smooth scrolling plugin, ScrollMoother:

https://greensock.com/scrollsmoother/

 

@akapowl, one of the forums superstars, has created some great examples for integrating ScrollTrigger with other alternatives like Locomotive:

See the Pen wvJroYy by akapowl (@akapowl) on CodePen

 

And this using smooth scrollbar:

See the Pen poeoONq by akapowl (@akapowl) on CodePen

 

Finally you could check Lenis:

https://lenis.studiofreight.com/

 

Good luck with your project.

Happy Tweening!