Jump to content


Control grid panel width in horizontal scroll container

Go to solution Solved by mvaneijgen,

Recommended Posts

Hi guys, sorry that I have to ask but I'm always running in the same issue. Don't want to disturb you guys by saying I'm a newbie..but actually I am.
I started by taking the horizontal scroll container codepen demo of Greensock and integrate a grid overlay in the second container.
It works, but after the grid container there is a white space which is not wanted and the last sections width gets broken. I realy don't get why, could you pls give me an explanition and help me to solve the white space issue?

Further I want that fire an scroll animation when the container is in viewport, tried this with the following lines but it doesn't work.

The goal should be that the view autoscroll to the end of the section for the first step and then scroll backwards to middle (50%) of the same section.

I integrated the ScrollToPlugin so I don't know what I forgot - if you recognize the reason pls let me know.


let tl = gsap.timeline()
.to(redContainer, {duration: 2, scrollTo: () => "+=" + document.querySelector(".red").offsetWidth});

Thanks a lot guys!

See the Pen LYroWdq by Ted13x (@Ted13x) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @Ydonut welcome to the forum! 


The issue lies in that the demo is setup with a particular knowledge in mind. That is: every panel is a 100% width of the browser window. You've modified the pen to have the panels be what ever width they needed to be, which will trow off this line xPercent: -100 * (sections.length - 1), this will animate every panel -100 to the left times the number of panels, -1, because the first one is already in view. 


If you want different panels to have different widths you'll have to change this logic. Instead of xPercent I would just use x and calculate the with off each panel add them all to each other and make that the negative amount to move it to the left. Here is your pen with all elements having 100vw again.


See the Pen ZERNKKV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen


I have made a quick edit to your pen to demonstrate how I would do it. Personally I find the best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.


I've used a reduce function to calculate the width of each panel and add that all to each other. Use that as the negative value within the property x: -withOfAllPanels, the only thing you need to do right now is subtract the with of the first, because that one is already visible on page load. (or maybe the width of the last element, because you want to have that one visible, I'll leave that for you to figure out 😀). Hope it helps and happy tweening! 


See the Pen JjZqNOo?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 1
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.