Marquee
Continuous scrolling layouts used to display repeating content in a smooth, seamless loop across the page.
The marquee animation runs on page load and targets marquee-track together with its direction addon class: i-left, i-right, i-up, or i-down. Horizontal directions animate the track by -50% or 50% on the X axis, while vertical directions use the corresponding -50% or 50% movement on the Y axis. Each direction is set to repeat infinitely with a linear animation to maintain continuous movement. Hovering over marquee-track pauses the animation, and hovering out resumes it from its current position. Keep the direction class and interaction target paired correctly when creating or modifying marquee variations.
Direction Setup
Defines the structure and settings used to control the direction of marquee movement across different layout variations.
Left
marquee
|
|
position-float-left
|
|
marquee-track
i-left
|
marquee-list
flex-align-*
flex-gap-*
|
|
Content
Right
marquee
|
|
position-float-right
|
|
marquee-track
i-right
|
marquee-list
flex-align-*
flex-gap-*
|
|
Content
Up
marquee
|
|
marquee-track
i-up
|
marquee-list
flex-align-*
flex-gap-*
|
|
Content
Down
marquee
is-down
|
|
marquee-track
i-down
|
marquee-list
flex-align-*
flex-gap-*
|
|
Content
Content Components
Create and save reusable components for each marquee layout, organized by horizontal and vertical movement to keep direction-specific setups consistent and easy to reuse.
Create and save marquee components based on the content needed for each layout. When the same component is required in both orientations, create is-horizontal and is-vertical variants within the component and adjust the marquee-list alignment accordingly. This keeps both orientations within a single reusable component while preserving the correct content structure for horizontal and vertical movement. These Components (Shift A) are stored within the Content category.
Horizontal
Logos
Marquee - Logos
is-horizontal
Label Placeholder (Duplicate Item)
Marquee - Placeholder
is-horizontal
Vertical
Logos
Marquee - Logos
is-vertical
Label Placeholder (Duplicate Item)
Marquee - Placeholder
is-vertical
Elements
System Container
Down
Note: The is-down addon class is part of the structural setup for a downward vertical marquee. It modifies the marquee container so the layout works correctly with the corresponding Down track direction and interaction movement.
Content Wrapper
Spacing with Flex Gap
marquee-list
flex-gap-*
|
|
Content
Spacing with Padding
marquee-list
|
|
padding-*
|
|
Content
Marquee - User Guide
The marquee class is the main container for the setup. Inside it, marquee-track defines the movement direction, while marquee-list controls how the marquee content is arranged. The marquee-list element uses Flex, allowing flex-align-* and flex-gap-* addon classes to control alignment and spacing. When creating reusable marquee components, use separate horizontal and vertical variants as needed so the content structure matches the intended movement direction.
Duplicate the marquee-list together with all of its content inside marquee-track so two identical lists sit next to each other. This duplication creates the continuous loop by allowing one list to move out of view while the second follows directly behind it, preventing visible gaps during the animation.
If spacing between items is controlled with a flex-gap-* addon class, add a spacing element after the final item in each marquee-list, as shown in the example below. This keeps the space between the end of one list and the beginning of the duplicated list equal to the gaps between all other items. If the content items already include spacing through padding classes, this additional element is not required.
