scroll ticker marquee logo-cloud infinite loop auto-scrolling logo cloud horizontal ticker or news marquee continuous scroll for partner logos need seamless looping horizontal scroll logo cloud should auto-scroll without JavaScript want marquee effect that pauses on hover
Infinite Scroll
Fetch snippet JSON:
curl https://webspire.de/snippets/animations/infinite-scroll.json Hello, World
This element animates in
Background
Customize
Quick Start
<div class="animate-infinite-scroll"><!-- duplicate items for seamless loop --></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 559 bytes · 29 lines
- Custom Properties
-
--scroll-speed--scroll-direction - Classes
-
.animate-infinite-scroll
scroll ticker marquee logo-cloud infinite loop
Apply .animate-infinite-scroll to a flex container. Duplicate the content inside so the loop appears seamless (the animation shifts by -50%).
Customize via CSS custom properties:
--scroll-speed— loop duration (default:30s, lower = faster)--scroll-direction— set toreversefor right-to-left
Pauses on hover automatically. Falls back to a wrapped static layout when reduced motion is preferred.