Marquee Block
An infinite scrolling ticker that continuously scrolls its children horizontally. Powered by requestAnimationFrame for smooth per-pixel animation. Items are duplicated by JavaScript to create the seamless loop.
PREVIEW
Acme Inc
•
Globex Corp
•
Initech
•
Umbrella Co
•
JS duplicates all items to build the seamless loop — the saved HTML above only contains one pass
When to use this block
- Client logo strips that scroll continuously
- News tickers, announcement banners
- Decorative text ribbons across the page
- Testimonial or quote strips
Speed
Choose a preset or set a custom speed in pixels per second. The animation uses requestAnimationFrame for smooth performance.
Speed
Sidebar Panel
SPEED VALUES
Slow
40 px/s
Normal
80 px/s
Fast
160 px/s
Custom
any px/s
Direction
Scroll left (default) or right.
Left
Items scroll to the left
Right
Items scroll to the right
Pause on Hover & Gradient Mask
Two toggles that control interaction and visual polish.
Options
Sidebar Panel
Pause on Hover
Gradient Mask
Pause on Hover
When enabled (default), the animation pauses on mouse hover so users can read the content. On touch devices this has no effect.
Gradient Mask
Applies a CSS mask with transparent edges that softly fades items in and out at the left and right boundaries. Creates a polished, non-abrupt scroll look.
Item Gap
Space between marquee items in pixels. Applied as gap on the inner flex track.
Gap
Sidebar Panel
Gap
px
Raw pixel value (default 64px). For tighter logo strips use 32px. For text tickers, wider gaps like 80–120px work well.
Background
Solid color or gradient on the outer wrapper. Gradient overrides color.
Background
Color
#F7F7F7
Gradient
None
Spacing
Padding (all 4 sides) and margin. Responsive across breakpoints.
Responsive: Mobile Tablet Desktop
All Available Controls
Speed Slow, normal, fast, or custom px/s
speed: "slow" (40px/s), "normal" (80px/s), "fast" (160px/s), "custom". speedCustom: px/s number (only used when custom). The preset word never appears in the HTML — it's always resolved to a data-speed pixels-per-second number on .marquee-track.
Direction Left or right
direction: "left" (default) or "right". Rendered as data-direction on .marquee-track, read by the view.js animation loop.
Pause & Mask Hover pause, gradient edge fade
pauseOnHover: boolean (default true). gradientMask: boolean (default true) — applies CSS mask-image with transparent edges for a fade effect.
Gap Space between items in px
gap: raw px number (default "64"). Applied as inline gap on the .marquee-track flex container.
Background Color or gradient
backgroundColor/backgroundGradient. Gradient overrides color. Merged into the same inline style as the gradient mask.
Spacing Padding & margin, 3 breakpoints
Padding: paddingTop/Bottom/Left/Right (+Md/Lg). Margin: marginTop/Bottom/Left/Right (+Md/Lg). All in px.