← All elements
<div class="mq"><div class="tk"><span>DESIGN</span><span>CODE</span><span>SHIP</span><span>REPEAT</span><span>DESIGN</span><span>CODE</span><span>SHIP</span><span>REPEAT</span></div></div>About this animation
A seamless scrolling strip of words, with the track duplicated and translated by half its width in a looping animation.
How it works
The track contains the words twice. A keyframe moves it left by exactly 50 percent of its own width, which is the point where the second copy sits where the first began, so the loop is seamless. Hovering pauses the animation, and a mask gradient fades the edges of the strip.
Ways to customise it
- Replace the words and keep the second copy identical to the first.
- Change the 12s duration to scroll faster or slower.
- Edit the colour and border of the strip.
Good to know
Moving text can be hard to read, so it pauses on hover and is turned off under prefers-reduced-motion. The repeated copy can be hidden from screen readers with aria-hidden in production.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.