Jose Tamu
January 10, 2025 /
Intermediate

Horizontal Marquee

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 Dancepad elements inside marquee and create awesome designs.
Be aware that the elements must have defined dimensions or nowrap whitespaces in the case of texts or an eager loading at images to let the marquee do the appropiate calculations.

Content tab

Animation group

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 group

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.

Style tab

Rotation and Blur edges can be set at their groups at the Style tab.
There are other 2 groups available to style Horizontal Marquee: Margin and Dimensions (includes gap). If you need to apply additional styles, you can do so at the Settings Tab.