Jump to content
Search Community

ScrollTrigger - Smooth Scroll with Horizontal Scroll section

DonDraper test
Moderator Tag

Recommended Posts

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:


#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.



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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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:



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:



@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:



Good luck with your project.

Happy Tweening!

  • Like 3
Link to comment
Share on other sites

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...