Horizontal scroll with dynamic DOM changing

[Elvin Agaragimow]

We have some events list, and on the beginning loaded all list. 

We have switcher in first block, which switch current events, past events and all events. 

After switching we will have a problem with white space on the right side, because .pin-spacer's values didn't re-calculate.

I call tl.scrollTrigger.update() and tl.scrollTrigger.refresh() after switching, but it didn't have a result, and .pin-spacer didn't change.

Please, help me to solve this problem! 🤕
Thank you in advance! 🙂

 

P.S. Please, ignore the incorrect positioning and extra padding at the bottom, this is just a quickly torn piece for an example.

 

See the Pen bGRJVmV by hujphysn-the-sans (@hujphysn-the-sans) on CodePen

[akapowl]

Hello @Elvin Agaragimow - welcome to the forums.

 

When you set invalidateOnRefresh: true and use functional values for the start and end of the ScrollTrigger (those especially help for resizes), as well as for the xPercent of the tween, things appear to be working just about right, when you change the filter and call ScrollTrigger.refresh().

 

Only problem now is that when there is not enough content to fil the screen (e.g. when clicking on Current Events in full-window view), things will be moving to the right - so you'll have to add an exception of some sort for that case to your logic.

 

Hope that's helpful  

 

See the Pen 7a70cc3ee757fd73d03f9d308bf4cb0b by akapowl (@akapowl) on CodePen

[Elvin Agaragimow]

Thank you, @akapowl! Now I undestood that problem 😃 You are really superman  

[Elvin Agaragimow]

@akapowl, thanks a lot for your previously answer, it was solution! But unfortunatelly for a part of problem  

I added exception for right scrolling when we have one event, but we still have a problem with 'unreal' height of our document, we can scroll down, and if we scrolled down and decided to see our Hero-block, we must scrolling up at all height of document what we scrolled.

How can we change .pin-spacer params ?

[akapowl]

 

Sorry, I'm not sure I'm following.

 

38 minutes ago, Elvin Agaragimow said:

I added exception for right scrolling when we have one event, but we still have a problem with 'unreal' height of our document, we can scroll down, and if we scrolled down and decided to see our Hero-block, we must scrolling up at all height of document what we scrolled.

 

Are you saying that for the exception you implemented you are getting a really tall height to scroll?

If so, could you possibly show how you implemented the exception in a codepen - I think there might be other solutions than having to change the .pin-spacer params.

 

You could e.g. add an exception/workaround via a ternary operator; like this for the xPercent of the tween

 

xPercent: () => { return getValue() > 0 ? -1 * getValue() : 0 }

 

and alongside that some similar logic for the end of the ScrollTrigger

 

end: () => getValue() > 0 ? "+=" + document.querySelector('.pe-events__wrap').offsetWidth / 2 : "+=" + 0,

 

See the Pen 3063923a4bb1add3c9759e3bc3cf7f43 by akapowl (@akapowl) on CodePen

 

 

 

That way, if the width of the window is larger than the content, the content will get tweened to 0 instead (so no visible movement, as it is at 0 from the start) and the duration of the ScrollTrigger (since you are pinning that represents the amount of extra space added by the pinSpacer) will be 0; so no visible tween with no extra space added by ScrollTrigger in that case.

 

But maybe I'm just misunderstanding?

 

[Elvin Agaragimow]

20 minutes ago, akapowl said:

 

Sorry, I'm not sure I'm following.

 

 

Are you saying that for the exception you implemented you are getting a really tall height to scroll?

If so, could you possibly show how you implemented the exception in a codepen - I think there might be other solutions than having to change the .pin-spacer params.

 

You could e.g. add an exception/workaround via a ternary operator; like this for the xPercent of the tween

 

xPercent: () => { return getValue() > 0 ? -1 * getValue() : 0 }

 

and alongside that some similar logic for the end of the ScrollTrigger

 

end: () => getValue() > 0 ? "+=" + document.querySelector('.pe-events__wrap').offsetWidth / 2 : "+=" + 0,

 

 

 

 

 

 

That way, if the width of the window is larger than the content, the content will get tweened to 0 instead (so no visible movement, as it is at 0 from the start) and the duration of the ScrollTrigger (since you are pinning that represents the amount of extra space added by the pinSpacer) will be 0; so no visible tween with no extra space added by ScrollTrigger in that case.

 

But maybe I'm just misunderstanding?

 

B-E-Autifull! Really, I didn't even think about this.. sadly.. What doesn't kill us makes us stronger  . Thanks a lot !!