Jump to content
Search Community

Horizontal sections width

cerealbeast test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

I'm struggling to get the correct width for a horizontal scroll section. There are 3 sections, each one ha a width of 100vw, then there is a spacer div in between each section with a width of 5vw. So the total width of the 3 sections and 2 spacers is 310vw. But when setting the width of the container div to 310vw or 310%, there is still part of the last section cut off. Does anyone know how to fix?

See the Pen JjZgJMX by gwjr (@gwjr) on CodePen

Link to comment
Share on other sites

  • Solution

 

xPercent is based on the width of an element, so the logic of your fake-horizontal-scrolling tween will only ever work for cases where ALL sections have a width of 100% of the window's width (and no space between them).

 

If you want to create a fake-horizontal-tween for sections with different widths like you have, you will most likely need to tween on the x of the sections instead, and manually calculate where you need to tween them to, like this older example from the demos-page does...

 

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

 

 

 

...or make your calculations based on a wrapping container's scrollWidth minus a window's width. Something like this.

 

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

 

 

 

BTW; @GreenSock @Cassie @Rodrigo

 

That demo from the demos-page I mentioned above does not do what it was supposed to showcase anymore - looks like it was changed a bit, and in the process the active class that is supposed to be toggled went missing from the CSS. That demo actually showcased how to trigger things in a fake-horizontal-scenario before the containerAnimation feature was introduced, and I think the last part in the JS, which is resonsible for that, might be confusing to users nowadays. Maybe it could/should be updated to use containerAnimation instead?

 

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