In this Pro tutorial we'll use GSAP's ScrollTrigger library in Bricks to create a section that will scroll horizontally across a number of full width containers as the user scrolls down the page. This can be used on multiple sections on a page.
For the tutorial, we'll use Bricks' Query Loop feature to fetch a few posts with the container element and have these as the content that is inside the horizontal scrolling section. The effect is turned off for <992px (tablet portraight), where the posts are then stacked instead, this can be easily changed.
Page Export
An export file of the demo page is provided at the end.
Creating the Structure in Bricks
The demo page has a fairly simple structure, consisting of just three main sections. The top and bottom sections are just regular sections (container element) to show where other content would be on the page and can be ignored. The second section is where all of the horizontal scrolling is implemented. This is our horizontal scroll container, which we'll give the class 'horizontal-scroll-container' so we can apply some CSS later.
If we were creating two horizontal scrolling sections on the same page, we'd just create the same structure for that section and give it the same 'horizontal-scroll-container' class.
We can see from the structure, there's only one container inside of the horizontal scroll section, our 'post container'. This is being duplicated by the Query Loop feature to output three posts. If we weren't using the Query loop, we'd just add more containers manually inside of the section and add in the content.
