Problem with width in horizontal scrolltrigger

[Vladyslav Afonin]

Hi! I have a problem in my code with container's width, when I scrolling. For example, I don't see my las item in the list. I can't understand why there is this problem. I use ScrollTrigger and GSAP for this horizontal scroll. Also active element is wrong, because I can't scroll to end of list

See the Pen BadoYqM by afonin_vlad (@afonin_vlad) on CodePen

[akapowl]

Hello @Vladyslav Afonin - welcome to the GSAP forum.

 

Your last item is not being reached for several reasons:

1. You don't have enough scrollable space. In the fake-horizontal scroll-demo where you probably got your codebase from, the sections are 100vh tall, that's why things work in the first place with the pinning and the end of the ScrollTrigger bein "+=" the maxWidth. You'll have to make sure to 'fill up' that blank space somehow, so you at least have content that fills the window to begin with.
   
   I added a spacer div here and set its  height via GSAP, but it could be sufficient to just make the section itself 100vh tall - maybe that's something you could try.
    
2. Margins as part of elements in the box-model are outside of the element, that's why they don't count into the element's width, and you have a margin-left set for your boxes - so you'd have to consider that when getting the maxWidth. I did so here by adding a maxWidth += gsap.getProperty(section, 'marginLeft') in the forEach-loop.
    
3. And lastly there is a padding of 20px left and right on your .principles container that if I am not mistaken you would also have to consider (at least the one on the left - but since things are based on 100vw here, part of your last box will be covered by the scrollbar, so I just doubled it up here) - I just hardcoded it at the end of the function outside of the forEach-loop here.

See the Pen 480c18e83b89b5f810796e405201b24e by akapowl (@akapowl) on CodePen

 

 

 

I am also not quite sure if it is a great idea to have that transition: .5s all ease on your .principles__item - I would rather specify what transitions you want to have working on it and for a smoother scrolling appearance just seth the scrub to 0.5.

 

Finally, for the triggering of individual scrolltriggered animations within that fake-horizontal-scroll, I would suggest taking a look at the new containerAnimation property, that came with GSAP 3.8.0 - it makes these waaay easier than those calculations one had to do before.

 

From the docs:

 

containerAnimation

Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a  See the Pen 9be5d371346765a8c9a426e8f65f1cea by GreenSock (@GreenSock) on CodePen  and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger.

 

Hope that was helpful. Cheers.

[Vladyslav Afonin]

@akapowl Thank you so much for help, but I need slightly another result. I have live example on this page https://brights.io/
In the second section Our services there is same block with horizontal scroll and I try to repeat it. So I can't give for last element Active class and I can't tune correct width on different display's sizes. I will try again to change options in Javascript

[akapowl]

 

Creating somthing similar feeling to the website actually wouldn't be the hardest - I'll keep it relatively simple in this following example.

 

• You could add a padding-left to your .principles__list; 
  I chose 50vw minus half a box's width here, so the first box will be centered at the start
   
• In the getMaxWidth function where I previously substracted the padding on the container you could adjust the maxWidth further to your liking;
  I chose maxWidth += window.innerWidth because of the extra padding added on the .principles__list as mentioned above, plus another hal window-width because the last box is supposed to end in the center. That's why I also substract a box's width from the maxWidth again, so it will end centered.
   

That's sort of the logic you could follow for initially positioning and tweening it to your liking.

 

For making it reactive to resizes, you could add an invalidateOnRefresh: true to the ScrollTrigger and change the maxWidth variable in the x-property of the tween and the end-property of the ScrollTrigger to a function call getMaxWidth() and you should be good to go.

 

Works quite alright:

 

See the Pen 05e17feff85ea25b0d5aee532c0ff387 by akapowl (@akapowl) on CodePen

 

 

 

Edit:

I just realized, that the demo you got your codebase from actually has an eventListener for getting the maxWidth on resizes - better keep the maxWidth variable in the x-property of the tween and end-property of the ScrollTrigger and just call the getMaxWidth function once on resize instead of every time for every element.

 

See the Pen 5351d83e2b4241bfe3407ef6113e1f51 by akapowl (@akapowl) on CodePen