cerealbeast Posted December 15, 2022 Share Posted December 15, 2022 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 More sharing options...
Solution akapowl Posted December 15, 2022 Solution Share Posted December 15, 2022  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 More sharing options...
Cassie Posted December 15, 2022 Share Posted December 15, 2022 Noted! We'll remove it and add a containerAnimation demo instead. Thanks @akapowl 1 Link to comment Share on other sites More sharing options...
Cassie Posted December 15, 2022 Share Posted December 15, 2022 Done! 🥳 2 Link to comment Share on other sites More sharing options...
cerealbeast Posted December 16, 2022 Author Share Posted December 16, 2022 Thanks for the explanation @akapowl 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now