LoopBox is a special box that automatically duplicates its child elements and loops them infinitely, similar to a marquee. It lets you create banners, logo marquees, scrolling text, and other elements 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
A LoopBox only starts animating once you add child elements to it.
To add more child elements, either add a new box or copy and paste existing ones.
3. Configure scroll settings
Set up your scroll conditions in the [Loop] tab of the right panel.
* If the panel is closed, please open the right panel.
Speed (px/s)
Specifies how many pixels the content advances per second. The default value is 60 px/s, and higher values make elements flow faster.
Set the speed by entering a value in [Speed] or using the slider.
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: You can change the scroll direction per breakpoint.
Pause on hover
When the [Pause on hover] checkbox is ON, scrolling content pauses while being hovered over. When OFF, the animation keeps playing regardless of where the mouse cursor is.
4. Preview the LoopBox
Use [Preview] in the [Loop] tab to see a sample of the loop animation based on your settings.
Things to keep in mind with LoopBox
Box overflow settings
The box overflow setting is automatically set to hidden (overflow: hidden).
Because this is required to hide elements outside the area, other options such as scroll (overflow: scroll) and visible (overflow: visible) are disabled.
Accessibility support
Support for prefers-reduced-motion
When prefers-reduced-motion is enabled in the OS or browser settings (such as "Reduce motion," "Reduce parallax effects," or "Remove animations"), LoopBox animations automatically stop.
This provides a thoughtful experience for motion-sensitive users with no additional setup required.
Screen reader support
The duplicate elements generated inside a LoopBox are automatically given aria-hidden="true".
Only the original elements are read by screen readers, so the same content isn't read out repeatedly.
LoopBox and responsive settings
When the screen size changes, the LoopBox automatically recalculates its layout and plays the animation with the appropriate direction and number of clones.
You can adjust the following styles per breakpoint in LoopBox:
How elements are arranged (such as flexDirection)
Spacing between elements (such as gap)
Other design-related styles
Troubleshooting
Here are some common LoopBox issues and how to resolve them.
The LoopBox isn't scrolling
Check that 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 "Reduce motion" is enabled in your OS or browser settings.
There are gaps between child elements
Adjust the gap property of the LoopBox.
Check the margin values set on the child elements.
Scrolling is choppy
Slow the speed down slightly to reduce the load.
If you have many child elements, reduce the number.
For images, optimize them by compressing the file size, etc.
Tip: Common LoopBox setups
Company logo marquee
LoopBox (horizontal, right to left, speed 50)
├── Logo image 1
├── Logo image 2
├── Logo image 3
└── Logo image 4
Lay out logos of partner companies horizontally, with new logos continuously flowing in from the right.
Scrolling text
LoopBox (horizontal, right to left, speed 80)
└── Text "🎉 Limited-time sale now on! 🎉"
Display announcements and campaign messages as attention-grabbing scrolling text.
Banner image loop
LoopBox (vertical, bottom to top, speed 40)
├── Banner image 1
├── Banner image 2
└── Banner image 3
Endlessly scroll banners vertically to show multiple banners in succession.
Loop scrolling doesn't work on some devices
It's possible that prefers-reduced-motion is enabled on the device (such as "Reduce motion," "Reduce parallax effects," or "Remove animations").
For accessibility reasons, LoopBox animations automatically stop when this setting is enabled.
Check whether any of the following settings are enabled on the device in question.
OS | How to access the setting | Source |
macOS Tahoe | System Settings → Accessibility → Display → "Reduce motion" | |
iOS 26 | Settings → Accessibility → Motion → "Reduce Motion" | |
Windows 11 | Settings → Accessibility → Visual effects → "Animation effects" |
loop loop box Loop Box