Multiple horizontal scrolling elements with surrounding pin

[ketchupmarketing]

Trying to achieve an effect where I have multiple horizontally scrollable sections between normal section on the page.

 

Sections that scroll horizontally should be pinned during the scroll.

 

The sample above does not work as ".main-content' is used as a pin. This setup works when there is only one scrollable section. This pen illustrates excess white space surrounding the block which should not be there.

 

Do you have any suggestions on how to modify the code in a way that multiple sections would be supported on one page and each section would be pinned during scroll?

 

Ideally ".block" or ".container" of each scrollable section would be pinned whilst scrolling horizontally.

 

Thanks

See the Pen 41e4c925f255359cfb85d35c4d214a34 by ketchupmarketing (@ketchupmarketing) on CodePen

[Rodrigo]

Hi @ketchupmarketing and welcome to the GreenSock forums!

 

The idea would be to pin the entire parent component or to group the elements before and after the horizontal section like in these examples:

 

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

 

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

 

Hopefully this helps.

Happy Tweening!

[ketchupmarketing]

Hi Rodrigo

 

Thanks for getting back to me.

 

Am I right in saying that there is no way to achieve this without grouping sections? Keeping my HTML exactly as it is? My problem is that section are dynamic on the page, so can be added or removed when needed and horizontally scrollable section might not have next sibling for example.

 

Examples provided by yourself, although useful, do not seem to work with multiple scrollable instance on a single page. Perhaps it was never intended to?

 

Thanks

 

[Rodrigo]

Hi,

 

There could be another options but it might not be as simpler as wrapping everything or every small section and it's surrounding siblings with another element. I would try to get as much control as possible over the HTML/CSS structure in order to make it work like the examples provided. Unfortunately creating such approach is not something we have time to do and is beyond the help we can provide in these free forums.

 

9 hours ago, ketchupmarketing said:

Examples provided by yourself, although useful, do not seem to work with multiple scrollable instance on a single page. Perhaps it was never intended to?

They can, you just need to tinker a bit with the logic and understand better how ScrollTrigger and pinning works in order to get there. Mostly it has to do with looping through those sections correctly and as I already mentioned, having a predictable HTML/CSS structure. Here is a fork of one of the examples with multiple horizontal sections:

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

 

Hopefully this helps.

Happy Tweening!

[ketchupmarketing]

Hi Rodrigo

 

Thank you for the examples. I managed to do what I needed. For reference - I used one container to wrap all the sections on the page (horizontal or not) and then used "pinnedContainer" (the container covering sections) to ensure I can use the same pinned container to all my horizontal sections.

 

Thanks again