Sections are overlapping way too much with horizontal scroll and display grid

[Zedandwhite]

Hi everyone,

 

just started with GSAP two days ago!

 

I'm having a problem with my horizontal scroll layout where sections are overlapping each other to an extent that you can't even view the content in them. Also, a lot of margins are being added. If I put real data in these sections, the last section disappears from the viewport (due to margin/padding being added)

 

What I want to achieve is horizontal scroll but sections should respect the width and margins instead of overlapping. Please suggest me what should I do...

See the Pen MWoxqZZ by ZedandWhite (@ZedandWhite) on CodePen.

[akapowl]

Hey @Zedandwhite, welcome to the GSAP forum.

 

Since margins are outside of the elements in the box-model, they don't add to the elements' width, why handling things with xPercent (which relates to the width of the element) here for each of your sections is not really gonna work out.

 

Here is a different approach, tweening on the x instead, based on the container's scrollwidth minus the window's width, so it ends flush against the right side of the window - this way you wouldn't have to worry about the margins in between your sections.

 

See the Pen 8a4805d473886986647074f8ae5560c7 by akapowl (@akapowl) on CodePen.

 

 

[Zedandwhite]

12 minutes ago, akapowl said:

Hey @Zedandwhite, welcome to the GSAP forum.

 

Since margins are outside of the elements in the box-model, they don't add to the elements' width, why handling things with xPercent (which relates to the width of the element) here for each of your sections is not really gonna work out.

 

Here is a different approach, tweening on the x instead, based on the container's scrollwidth minus the window's width, so it ends flush against the right side of the window - this way you wouldn't have to worry about the margins in between your sections.

 

 

 

 

 

This works perfect!

 

Thanks for your help

 

While we are at it, can I ask another question related to this design?

 

How can I pause first black section at the left corner of screen and first grey section should overlap and scroll over it. doing the same for 2nd group. Basically, when black sections reach the left of screen, they get pinned. 

 

Also, how do I make it draggable (horizontally)? I have used Draggable plugin but I only want that to drag in +x position not -x

[akapowl]

5 minutes ago, Zedandwhite said:

How can I pause first black section at the left corner of screen and first grey section should overlap and scroll over it. doing the same for 2nd group. Basically, when black sections reach the left of screen, they get pinned. 

 

As you are not actually scrolling horizontally but just immitating a horizontal scroll with a tween, that won't be possible easily.

You can't just pin things but instead will have to do some calculations for when to stop the tween of each section, to create an effect similar to pinning - something like I tried in this thread here, but it is rather complicated.

 

 

 

9 minutes ago, Zedandwhite said:

Also, how do I make it draggable (horizontally)? I have used Draggable plugin but I only want that to drag in +x position not -x

 

There is a pen that demonstrates how you can add draggability via a proxy element in the ScrollTrigger-HowTo collection over on codepen

 

See the Pen ZELQqeJ by GreenSock (@GreenSock) on CodePen.

 

[Zedandwhite]

3 minutes ago, akapowl said:

 

As you are not actually scrolling horizontally but just immitating a horizontal scroll with a tween, that won't be possible easily.

You can't just pin things but instead will have to do some calculations for when to stop the tween of each section, to create an effect similar to pinning - something like I tried in this thread here, but it is rather complicated.

 

 

 

 

There is a pen that demonstrates how you can add draggability via a proxy element in the ScrollTrigger-HowTo collection over on codepen

 

 

 

 

Thanks again. Much appreciated

[akapowl]

...on an extra note:

 

I would recommend not using the body as the trigger and for pinning, as it might complicate things for you (like getting rid of the horizontal scrollbar at the bottom. Better use your #container instead with a start of 'top top' - and in this case you would also have to add a + 40 on the calculations for the margin-left of your #dataContainer there. This feels better to me at least.

 

See the Pen 63d7e3e6394e85c8eac9ecafd82aaa60 by akapowl (@akapowl) on CodePen.

 

[Zedandwhite]

2 minutes ago, akapowl said:

...on an extra note:

 

I would recommend not using the body as the trigger and for pinning, as it might complicate things for you (like getting rid of the horizontal scrollbar at the bottom. Better use your #container instead with a start of 'top top' - and in this case you would also have to add a + 40 on the calculations for the margin-left of your #dataContainer there. This feels better to me at least.

 

 

See the Pen

See the Pen 63d7e3e6394e85c8eac9ecafd82aaa60 by akapowl (@akapowl) on CodePen.

by akapowl (@akapowl) on CodePen

 

 

Thanks again

 

It solved a problem that just occurred when I merged this code with actual data. The last div was clipped out of viewport.

[Zedandwhite]

1 hour ago, Zedandwhite said:

Thanks again. Much appreciated

Okay so I merged the fake pinning code with my code and everything has stopped working on Codepen (scroll works locally but not pinning). Can you please look into this?

 

Here's the updated codepen:

 

See the Pen MWoxqZZ by ZedandWhite (@ZedandWhite) on CodePen.

[akapowl]

Here are some notes on that;

 

• You are initially creating a tween (scrollTween) on all sections and then again in the forEach loop also create a tween for each individual section. You shouldn't do that - in the fake-pinning example the only tweens created are in the forEach loop
• When checking if an element has a class, don't include the leading '.'
   

  // bad
  thumb.classList.contains('.fakePin')
  
  // good
  thumb.classList.contains('fakePin')

• You forgot to change the container variable in the individual tweens to mainContainer - a container variable doesn't exist in your example.
• There are no margins on your panels, but instead you are making use of the grid-column-gap, so instead of the marginRight of the element that is being considered in the getTotalWidthToMove() function, you will have to get the gridColumnGap of the parent.
• I also made some changes to the CSS in this following example, so you might need to consider addapting that for things to work properly

 

See the Pen db4c5133bf37a7f617fceda56f94c8dc by akapowl (@akapowl) on CodePen.

 

[Zedandwhite]

2 hours ago, akapowl said:

Here are some notes on that;

 

• You are initially creating a tween (scrollTween) on all sections and then again in the forEach loop also create a tween for each individual section. You shouldn't do that - in the fake-pinning example the only tweens created are in the forEach loop
• When checking if an element has a class, don't include the leading '.'
   

  // bad
  thumb.classList.contains('.fakePin')
  
  // good
  thumb.classList.contains('fakePin')

• You forgot to change the container variable in the individual tweens to mainContainer - a container variable doesn't exist in your example.
• There are no margins on your panels, but instead you are making use of the grid-column-gap, so instead of the marginRight of the element that is being considered in the getTotalWidthToMove() function, you will have to get the gridColumnGap of the parent.
• I also made some changes to the CSS in this following example, so you might need to consider addapting that for things to work properly

 

 

 

 

Works like a charm  Thank you so much for your help!