Marquee

Marquee 2.0.1 requires:

• PHP: 8.2.0 or newer
• YOOtheme Pro: 5.0.42 or newer
• Joomla: 5.4.8 or newer, or WordPress: 7.0.4 or newer
• A current version of Chrome, Firefox, Safari or another WebKit-based browser

JavaScript must be enabled for the continuous scrolling loop. Without it, the original content remains available as a regular static row.

Marquee continuously moves a horizontal row of Builder items. It is useful for announcements, logos, testimonials, offers, partners, news or any repeating content that should travel across the available width.

The server renders one original set of items. The browser creates decorative copies only when they are needed to fill a seamless loop.

1. Add the Marquee element in YOOtheme Pro Builder.
2. Edit the placeholder items or add your own items.
3. Choose Fixed or Auto under Item Width Mode.
4. Set the duration, direction, gap and optional progress bar.
5. Use the Panel, Title, Meta, Content, Image, Video and Link sections to style all items consistently.

New elements start with eight placeholder items so the animation can be previewed immediately.

An item can contain a title, meta text, rich content, an image, a direct video file, an icon, hover media, a link and a Builder sublayout. The item can also override selected global settings such as panel style, link text, link ARIA label and link attributes.

Fixed uses the configured responsive item widths and is the best choice for cards, panels and evenly sized slides. Auto lets every item use the width required by its own content and is useful for a running line of text, badges or logos with different proportions.

In Fixed mode, set an item width for phone portrait, phone landscape, tablet landscape, desktop and large screens. Later breakpoints may inherit the previous value, so you only need to define widths where the layout changes.

Fill available column space distributes any remaining row space between fixed-width items. Disable it when every item must keep its exact configured width.

Switch to Auto item width and enable Don't wrap into multiple lines. This keeps text-based items on one line while allowing every item to retain its natural width.

Use Column Gap to control spacing between items. You can add dividers, center rows that do not yet fill the container and enable an opacity mask that softly fades content near the left and right edges.

These settings apply to the complete Marquee while the content and panel sections control spacing inside individual items.

Duration controls how long one animation cycle takes. A lower value moves items faster and a higher value moves them more slowly. Marquee normalizes the runtime value to the supported 5–50 second range.

Direction supports Normal, Reverse, Alternate and Alternate-Reverse. Enable Pause animation on hover when visitors should be able to stop the row with the pointer.

No. Marquee is designed for horizontal movement. Vertical movement would require different layout, sizing and interaction rules and is not part of this element.

Choose Top or Bottom under Progress Position, then configure its height, fill color, background color, margin and responsive visibility.

The progress bar is intentionally hidden while Marquee is static, keyboard focus mode is active or the visitor prefers reduced motion.

Choose an unboxed layout or a native YOOtheme card or tile style, then configure padding, clipping offset, hover style and image alignment. Match panel heights aligns the height of items in the same row.

Expand Content can stretch the image area, content area or both to use the available panel height. An individual item may override the global panel style.

Yes. A link can be applied to the title, image, call-to-action label or the complete panel. When Link panel is enabled, the visible call-to-action still points to the same destination.

Use the global link text and ARIA label for consistent output, or override them on a specific item.

Marquee supports opening a link in a new window, forcing a file download and adding nofollow or noreferrer. These options can be enabled globally for all linked items or enabled on an individual item.

A global option applies to every linked item. Item-level options add behavior for that item; they do not disable an option that is already enabled globally.

Primary media can be an image, direct video file or icon. A hover image or hover video can overlay the primary media with the selected transition. Native Builder controls are available for crop, focal point, border, grid width, alignment, inline SVG styling, icon size and color.

Image Background adds a subtle backing to the image area; it does not turn the image into a CSS background image.

Use a direct browser-playable video file, such as an MP4 or WebM file supplied through the media picker or an allowed local or HTTP(S) media URL.

YouTube and Vimeo page URLs are not direct video files, so they are not embedded and will not play in this field.

Choose whether video starts immediately, when it enters the viewport or when the item is hovered. The optional restart setting returns hover-controlled video to the beginning before the next playback.

Browser autoplay rules still apply, so videos intended to autoplay should normally be muted and use a browser-compatible format.

Images use lazy loading by default. Enable Enable eager loading only when an image must load immediately, such as prominent above-the-fold content.

Keep lazy loading enabled for most Marquee items to avoid downloading off-screen media earlier than necessary.

The sublayout can contain ordinary YOOtheme Pro Builder elements, including grids and more complex compositions. This makes it possible to build item layouts beyond the standard title, meta, content and media fields.

When a nested element should read data from the current Marquee item, select Parent as its Dynamic Content source.

An item with no visible content is omitted from frontend output. A sublayout containing only the empty structural row → column scaffold is also considered empty, even if that row or column has styling.

Add at least one real child element to make the sublayout count as content. This prevents blank panels from entering the animation.

The Display section can hide the sublayout, title, meta text, content, image, video, link and hover media for every item without deleting the saved values.

Hidden fields and a disabled sublayout are also excluded from Marquee's searchable content output, so search results do not advertise content that visitors cannot see on the page.

Yes. Use YOOtheme Pro Dynamic Content for supported item fields, and use a sublayout when the item requires several nested elements or a more complex data-driven design.

For elements inside the sublayout, the Parent source exposes the current Marquee item data.

Generated copies are decorative: they are hidden from assistive technology and removed from the Tab sequence. The original links and controls remain keyboard accessible.

When focus enters an original item, Marquee stops the loop, hides its copies and makes the original strip manually scrollable. Normal animation resumes after focus leaves the component.

Marquee respects prefers-reduced-motion. The animation and generated copies are disabled, the progress bar is hidden and the original items remain available in a static, manually scrollable row.

To protect the page from excessive DOM growth, one Marquee may create no more than 32 copy sets, 256 copied item roots and 4096 copied DOM elements. If filling the loop would exceed any limit, the element switches to a static, manually scrollable row.

This state is not permanent. Marquee measures again after relevant resize or Builder updates and resumes animation when the content fits within the limits.

Yes. Every instance owns its observers, generated copies, events and cleanup. Nested Marquees are scoped to their own roots so an outer instance does not manage the inner instance's items.

The lifecycle also handles Builder partial refreshes and DOM replacement. Removed or replaced elements release their observers, listeners, timers and generated copies.

Use the native YOOtheme Pro controls for panels, typography, colors, borders, spacing, alignment, media, grids, visibility and animations. The General and Advanced sections also provide position, element ID, custom classes, custom attributes and custom CSS.

For targeted CSS, assign a unique class or ID to the Marquee or to an individual item instead of depending on generated copies.

The Content field keeps trusted rich HTML, matching normal YOOtheme Pro authoring behavior. Use it only for markup entered by trusted Builder authors.

Image alternative text is normalized to plain text and escaped on output. Media URLs accept supported local YOOtheme paths and HTTP(S) URLs while executable, data and file schemes are rejected.

Yes. Marquee 2.0.1 includes localized labels and descriptions for 28 languages. Shared native Builder terms continue to use YOOtheme Pro's own translations, while Marquee-specific text comes from the plugin catalog.

If a translation is unavailable, the original English text is used as the fallback.

The Marquee runtime itself does not send network requests. It only measures and manages the element already rendered on the page.

Images, videos and linked resources still load from the URLs configured by the site author, and the CMS may perform its normal extension update checks separately.

• Confirm that JavaScript is enabled and the original row has a measurable width.
• Check whether reduced motion is enabled, keyboard focus is inside the element or the browser tab is hidden.
• Check whether the clone limits were exceeded; a very large element intentionally becomes static.
• Make sure enough visible items remain after the global Display settings are applied.
• Reload the Builder preview after installation or update, and clear stale site and browser caches.
• Recompile the active YOOtheme style if the element appears unstyled.
• For video, use a direct browser-playable file rather than a YouTube or Vimeo page URL.