Actions
Switch Theme
Getting startedInstallation
Basics
SocialsYouTube
Facebook
Jose Tamu
July 16, 2024 /  Advanced

Horizontal Scroll

Horizontal Scroll· Demo

How it works

Horizontal Scroll is a nestable block element. You can put any elements at it, like you would do at a Bricks block or container.
Animations from Next Bricks elements and Animator inside Horizontal Scroll will be triggered automatically when scrolling through it.
You must generate a default horizontal scroll at the element, otherwise there won’t be any content to scroll horizontally. For example, Horizontal Scroll can have 100vw as it’s width and a flex display and 5 children, each one having 50vw width. In this way, Horizontal Scroll element would overflow horizontally, because it’s children would generate a 250vw width while it only has a 100vw width.

Animation controls

Amount to scroll: determines how much scrolling amount we are giving to scroll horizontally. By default, it is set to auto, that will take the amount set by the width of the children. Setting a lower one would end the horizontal scroll before reaching the end of the children and a higher one would continue scrolling horizontally with a blank space.

ScrollTrigger controls

Scrub: determines the scrolling smooth, this is, how much time the animation should take to catch user’s scroll.
Start: determines the position of the Trigger to fire the animation. “top bottom” means when the top of the element hits the bottom of the viewport.
End: determines the duration when scrolling. For example, if we have +=900 at end control, it will take 900 scrolling pixels to play the horizontal animation completely. +=1800 will take 1800 scrolling pixels, increasing the duration.

Remove at breakpoint

At this section you can select the breakpoint at which Horizontal Scroll animation will be removed. If you don’t want to remove Horizontal Scroll animation at any breakpoint you can just leave it blank.
It is especially useful to collapse Horizontal Scroll children at mobile devices.

– Tamu

On this page