data-ix-marquee
Marquee
Summary
This component allows you to create seamless looping marquee animations such as in lists of logos, testimonials, or image galleries. It comes with a variety of helpful options such as allowing for vertical or horizontal direction, hover effects, and dynamic duration based on item count.
01
Prefix
As with all attributes in this library all attributes in used when implementing this solution start with the following prefix: if you see the tag {prefix} used on this page it refers to the following prefix:
02
Elements
The marqee component utilizes two layers of elements (with attributes) to make the interaction work. One wrap with at least one child list element. In most cases you may want several duplicate list elements to make sure that the interaction loops seamlessly, but if the list element is a component slot its easier to use the duplication option below so you don't need to manually manage two seperate lists and keep them in the same order.
Copy Elements To Webflow:
Attribute Name
Value
Default
Description
data-ix-marquee=wrap
wrap
boolean
The main element that holds the moving lists, any options should be applied to the wrap
data-ix-marquee=list
wrap
boolean
The list of logos or images that will move with the marquee interaction.
- Must be inside the
wrapelement - Often you will want to have multiple copies of the list element in order for it to loop seamlessly
- For it to have a perfect loop if you give the list element a transform of y = -100% (with default direction settings) the next list element should be in the exact same position as the current one
03
Options
All options are applied to the data-ix-marquee=wrap element.
Attribute Name
Value
Default
Description
{prefix}-vertical
boolean
false
Description
{prefix}-reverse
boolean
false
Switches the direction of movement (default is left to right for horizontal and bottom to top for vertical)
{prefix}-duration
number
30
Sets the duration of the entire interaction in seconds
{prefix}-duration-dynamic
boolean
false
Makes the duration dynamic based on the amount of items in the first list element (if there is only one child it will see how many children the child has and use that number for use in CMS collections)
{prefix}-duration-per-item
number
5
If duration dynamic is set to true this is the duration it will use per amount of items in the first list item.
{prefix}-hover-effect
pause / accelerate / decellerate
null
Adds an optional hover effect when the wrap element is hovered, it will either pause the movement, increase the speed, or decrease the speed based on the attribute value.
