LoopBox is a special box that duplicates its child elements and scrolls them in a continuous loop, like a marquee effect. This lets you show banners, logo marquees, or scrolling text that moves across the screen without any visible gaps at the edges.
Set up LoopBox
You can add a LoopBox to your canvas in a few steps.
1. Add a LoopBox
In the left sidebar, click the Add icon.
Open the Basic tab.
Scroll down, find LoopBox under Interaction, then drag it onto your canvas.
2. Add child elements to the LoopBox
LoopBox needs child elements before the animation can run.
Add any box elements you want to loop (such as text, images, or icons) as children of the LoopBox.
To add more items, either add new boxes or copy and paste existing ones.
3. Configure the scrolling behavior
You can adjust how the LoopBox scrolls in the Loop tab in the right panel.
If the panel is closed, open the right panel first.
Speed (px/s)
Set how many pixels the content moves per second.
The default is 60 px/s. A higher value makes the content move faster.
You can adjust the speed by entering a number or using the slider.
Tip: If you set the speed to 0, the animation stops.
Direction
The available directions change based on how the child elements are laid out (flexDirection).
For horizontal layouts (
row/row-reverse):Right to left
Left to right
For vertical layouts (
column/column-reverse):Bottom to top
Top to bottom
Tip: You can change the scroll direction separately for each breakpoint.
Pause on hover
Turn on Pause on hover to stop the scrolling content when a user hovers over it.
If it is off, the animation continues to play all the time, regardless of the mouse position.
4. Preview the LoopBox
In the Loop tab, click Preview to see a sample of the loop animation with your current settings.
Important notes about LoopBox
Overflow behavior
LoopBox automatically applies overflow: hidden as its overflow setting. This is required to hide elements outside the visible area. Other overflow settings, such as overflow: scroll or overflow: visible, are not available.
Accessibility
Reduced motion
If the operating system or browser has “reduce motion” (prefers-reduced-motion) turned on, LoopBox animations stop automatically. This means users who are sensitive to motion see a calmer, static version without any extra setup.
Screen readers
LoopBox automatically adds aria-hidden="true" to any duplicated elements it creates. Only the original elements are read by screen readers, so the same content is not announced repeatedly.
LoopBox and responsive layouts
When the screen size changes, LoopBox recalculates its layout automatically and adjusts the scroll direction and number of clones as needed.
For each breakpoint, you can adjust styles such as:
Layout direction (for example, flexDirection)
Spacing between items (for example, gap)
Other design-related styles
Troubleshooting
Here are some common issues and how to fix them.
LoopBox is not scrolling
Make sure the LoopBox has at least one child element.
Check that the speed is not set to 0.
Check if “reduce motion” is turned on in the operating system or browser.
There are gaps between child elements
Adjust the gap property of the LoopBox.
Check the margin values applied to the child elements.
The scrolling looks choppy
Lower the speed slightly to reduce the load.
If there are many child elements, try reducing the number.
For images, compress the file size or optimize them before using them.
Tips: Example setups for LoopBox
Here are some typical ways to use LoopBox.
Logo marquee
LoopBox (horizontal, right to left, speed 50)
├── Logo image 1
├── Logo image 2
├── Logo image 3
└── Logo image 4
Use this to display partner or client logos in a row, with new logos continuously flowing in from the right.
Scrolling text
LoopBox (horizontal, right to left, speed 80)
└── Text: “🎉 Limited-time sale now on! 🎉”
Use this to highlight announcements or campaigns in an eye-catching scrolling text format.
Banner image loop
LoopBox (vertical, bottom to top, speed 40)
├── Banner image 1
├── Banner image 2
└── Banner image 3
Use this to create a vertical infinite scroll of multiple banner images shown one after another.