Actions
Switch Theme
Getting startedInstallation
Basics
SocialsYouTube
Facebook
Jose Tamu
July 21, 2024 /  Intermediate

Horizontal Marquee

Texts
Buttons
Menus
Sliders
Medias
Cursors
Cores
Backgrounds

How it works

Horizontal Marquee allows to easily create a marquee effect with all the elements drag inside it. These elements can wrap other elements and have its own states (hover, focus, etc…) so you can even set any Next Bricks elements inside marquee and create awesome designs.
Be aware that the elements must have predefined dimensions or nowrap whitespaces in the case of texts or an eager loading at images to let the marquee do the appropiate calculations.

Style controls

Gap: determines the gap between marquee clones.
Rotate: in case you need to rotate the marquee, in deg.
Blur edges: if enabled, marquee’s edges will received a fade, being able to customize the width and color of it.

Animation controls

Speed: determines the marquee speed. The higher this number is set, the slower the marquee runs.
Loop: if the marquee should do only one iteration or should play in a loop.
Reverse: if the marquee should go from right to left instead of left to right.
Pause on hover: if enabled, the marquee will be paused on hover and will continue the animation from where it stopped.
GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.

Scroller controls

If scroller is enabled, marquee will also have a behavior on scroll:
Speed: determines the inertia speed of the scroller. The higher this number is set, the fewer the inertia is.
Multiplier: determines the distance traveled by the marquee. The higher this number is set, the more distance is traveled when scrolling.
Treshold: new marquee speed applied once the first scroll is produced. The higher this number is set, the faster the marquee will run.
Reversed: if true, once the first scroll is produced, marquee will run in a backwards mode.
Both directions: if true, every scroller hit will alternate the marquee direction to the opposite.
GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.

– Tamu

On this page