Jump to content
Search Community

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

Zedandwhite test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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:

 

Fake Pinning not working with horizontal scroll.

Link to comment
Share on other sites

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

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

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!

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