Component: Marquee Infinite running line animation

What the marquee component does

When the attribute data-anim-marquee is added to a container, the script automatically converts its children into an infinite scrolling animation.

• Automatically duplicates elements to create infinite scrolling
• Supports horizontal and vertical directions
• Allows speed and spacing control
• Can pause animation on hover

Basic usage

Add the attribute data-anim-marquee to any container.

<div data-anim-marquee>
	<span>element one</span>
	<span>element two</span>
	<span>element three</span>
</div>

Animation speed

You can control the animation speed using data-anim-marquee-speed.

• Default value: 100

<div data-anim-marquee data-anim-marquee-speed="80">
   ...
</div>

Space between items

Control spacing between elements using data-anim-marquee-space.

<div data-anim-marquee data-anim-marquee-space="50">
   ...
</div>

Animation direction

The marquee supports horizontal and vertical directions.

• left
• right
• top
• bottom

<div data-anim-marquee data-anim-marquee-direction="right">
   ...
</div>

Pause on hover

Add the attribute data-anim-marquee-pause to pause animation on hover.

<div data-anim-marquee data-anim-marquee-pause>
   ...
</div>

Start position offset

You can offset the starting animation position using data-anim-marquee-start.

<div data-anim-marquee data-anim-marquee-start="30">
   ...
</div>

Download

Add smooth, infinite marquee animations to your UI with zero setup.