LoopBox is a special box that automatically duplicates its child elements and loops them infinitely, like a marquee. It lets you create banners, logo marquees, scrolling text, and other effects that flow continuously across the screen without interruption.
Setting up a LoopBox
Follow these steps to add a LoopBox.
1. Add a LoopBox
Click the [Add] icon
in the left navigation.Select the [Basic] tab.
Scroll down within the tab, choose [LoopBox] under [Interaction], and place it on the screen.
2. Add child elements inside the LoopBox
The animation only starts working once you add child elements to the LoopBox.
To add more child elements, either add a new box or copy and paste existing ones.
3. Configure scroll settings
In the [Loop] tab of the right panel, set up the scroll behavior.
* If the panel is closed, open the right panel first.
Speed (px/s)
Specifies how many pixels the content moves per second. The default is 60 px/s—the higher the value, the faster the elements flow.
Adjust the [Speed] value or slider to set the speed.
Tip: Setting the speed to "0" stops the animation.
Direction
The available directions depend on how the child elements are arranged (
flexDirection).Horizontal (
row/row-reverse)Right to left
Left to right
Vertical (
column/column-reverse)Bottom to top
Top to bottom
Tip: The scroll direction can be changed per breakpoint.
Pause on hover
When [Pause on hover] is turned ON, the scrolling content pauses when hovered. When OFF, the animation keeps playing regardless of the cursor's position.
4. Preview the LoopBox
Use the [Preview] section in the [Loop] tab to see a sample of the loop animation based on your settings.
Things to know about LoopBox
Box overflow settings
The box overflow setting is automatically set to hidden (overflow: hidden).
Since this is required to hide elements outside the visible area, other settings like scroll (overflow: scroll) or visible (overflow: visible) won't take effect.
Accessibility support
Support for reduced motion
When "reduce motion" (prefers-reduced-motion) is enabled in the user's OS or browser, the LoopBox animation stops automatically.
This provides a more considerate experience for motion-sensitive users without any extra setup.
Screen reader support
The duplicate elements generated inside the LoopBox are automatically marked with aria-hidden="true".
Only the original elements are read aloud by screen readers, so the same content won't be repeated.
LoopBox and responsive design
When the screen size changes, LoopBox automatically recalculates its layout and plays the animation with the appropriate direction and clone count.
LoopBox lets you adjust the following styles per breakpoint:
Arrangement of elements (such as flexDirection)
Spacing between elements (such as gap)
Other design-related styles
Troubleshooting
Here are some common issues with LoopBox and how to fix them.
LoopBox doesn't scroll
Make sure child elements have been added inside the LoopBox. At least one child element is required.
Check that the speed value isn't set to 0.
Check whether the "reduce motion" setting is enabled in the OS or browser.
Gaps appear between child elements
Adjust the gap property on the LoopBox.
Check the margin values set on the child elements.
The scroll is choppy
Slow the speed down slightly to reduce the load.
If there are a lot of child elements, try reducing the number.
For images, optimize them by compressing the file size.
Tip: Common LoopBox examples
Company logo marquee
LoopBox (horizontal, right to left, speed 50)
├── Logo image 1
├── Logo image 2
├── Logo image 3
└── Logo image 4
Display partner company logos in a horizontal row, with new logos continually flowing in from the right.
Scrolling text
LoopBox (horizontal, right to left, speed 80)
└── Text "🎉 Limited-time sale now on! 🎉"
Show announcements or campaign messages as eye-catching scrolling text.
Banner image loop
LoopBox (vertical, bottom to top, speed 40)
├── Banner image 1
├── Banner image 2
└── Banner image 3
Scroll banners vertically in an infinite loop to display multiple banners one after another.
loop loop box Loop Box