{"id":351618,"date":"2026-08-18T15:51:10","date_gmt":"2026-08-18T15:51:10","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/motion-text-for-elementor\/"},"modified":"2026-08-18T15:50:35","modified_gmt":"2026-08-18T15:50:35","slug":"scrollora-marquee-for-elementor","status":"publish","type":"plugin","link":"https:\/\/en-gb.wordpress.org\/plugins\/scrollora-marquee-for-elementor\/","author":23535652,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.0","stable_tag":"1.0.0","tested":"7.0.4","requires":"6.8","requires_php":"8.0","requires_plugins":null,"header_name":"Scrollora Marquee for Elementor","header_author":"Kamalnath","header_description":"Adds a custom motion text widget to Elementor with smooth infinite scrolling animation.","assets_banners_color":"0d0520","last_updated":"2026-08-18 15:50:35","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"http:\/\/kamalnath-26.github.io\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":43,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"kamalnath26","date":"2026-08-18 15:50:35"}},"upgrade_notice":{"1.0.0":"<p>First public release. If you were using a pre-release build from earlier development (Parts 1\u20135), this version keeps every existing control ID, class name, and data attribute unchanged \u2014 your existing widget instances will continue to work exactly as before.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3653219,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3653219,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3653219,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3653219,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":[],"screenshots":{"1":"The Motion Text widget running on the frontend with fade edges enabled.","2":"The Content tab: the repeater of items and their optional links.","3":"The Advanced Motion tab: fade, easing, reverse direction, and independent pause conditions.","4":"The Style tab's Icons and Dividers sections in the Elementor editor.","5":"The Style tab's Advanced section: gradient text, text stroke, and the glass-effect background preset."}},"plugin_section":[],"plugin_tags":[7495,76538,147293,11026,276315],"plugin_category":[],"plugin_contributors":[273007],"plugin_business_model":[],"class_list":["post-351618","plugin","type-plugin","status-publish","hentry","plugin_tags-animated-text","plugin_tags-elementor","plugin_tags-elementor-widget","plugin_tags-marquee","plugin_tags-motion-text","plugin_contributors-kamalnath26","plugin_committers-kamalnath26"],"banners":{"banner":"https:\/\/ps.w.org\/scrollora-marquee-for-elementor\/assets\/banner-772x250.png?rev=3653219","banner_2x":"https:\/\/ps.w.org\/scrollora-marquee-for-elementor\/assets\/banner-1544x500.png?rev=3653219","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/scrollora-marquee-for-elementor\/assets\/icon-128x128.png?rev=3653219","icon_2x":"https:\/\/ps.w.org\/scrollora-marquee-for-elementor\/assets\/icon-256x256.png?rev=3653219","generated":false},"screenshots":[],"raw_content":"<!--section=description-->\n<p><strong>Scrollora Marquee for Elementor<\/strong> adds a native, professionally-built widget to the Elementor editor panel, grouped under its own \"Motion Text\" category. There is no separate settings page, no shortcodes, and no dashboard to learn \u2014 every option lives directly inside Elementor's own Content and Style tabs, exactly where Elementor users already expect it.<\/p>\n\n<p>At its core, the widget renders a horizontally-scrolling line of text items (a \"marquee\" or \"ticker\"), each optionally linked to a URL, with a true, gap-free, seamless infinite loop. The loop is built and measured entirely client-side, so it stays seamless whether you add two items or twenty, and the animation itself runs on the GPU compositor via CSS <code>transform<\/code>, not JavaScript, for smooth, low-overhead motion.<\/p>\n\n<h4>Features<\/h4>\n\n<p><strong>Content<\/strong>\n* Repeatable list of text items, each with its own optional link (URL, \"open in new tab\", \"nofollow\").\n* Dynamic tag support on both the text and the link, for use with Elementor Pro \/ ACF \/ dynamic data sources.<\/p>\n\n<p><strong>General Settings<\/strong>\n* Direction: right-to-left or left-to-right.\n* Speed, gap between items, pause-on-hover, and infinite-loop toggles.<\/p>\n\n<p><strong>Advanced Motion<\/strong>\n* Optional fade edges (responsive width, custom color).\n* Reverse direction, with five animation easing curves.\n* Start offset, so multiple instances don't all scroll in visual lock-step.\n* Independent pause conditions: on hover\/focus, when scrolled out of the viewport, and when the browser tab is hidden \u2014 all three can be combined freely.\n* GPU-acceleration toggle.<\/p>\n\n<p><strong>Style \u2014 Typography &amp; Colors<\/strong>\n* Full typography group control (family, size, weight, style, transform, decoration, line-height, letter-spacing).\n* Normal, Hover, and Active text colors.<\/p>\n\n<p><strong>Style \u2014 Background, Border &amp; Shadow<\/strong>\n* Classic or gradient background.\n* Border type, width, color, and radius.\n* Text shadow and box shadow.<\/p>\n\n<p><strong>Style \u2014 Spacing<\/strong>\n* Wrapper padding, margin, and border radius.\n* Independent per-item horizontal\/vertical padding.<\/p>\n\n<p><strong>Style \u2014 Hover Effects<\/strong>\n* Scale, opacity, and transition duration on hover \u2014 independent of the existing hover-pause behaviour.<\/p>\n\n<p><strong>Style \u2014 Icons &amp; Dividers<\/strong>\n* Optional decorative icon before and\/or after each item (any icon from Elementor's icon library), with size, color, and gap controls.\n* Optional divider between items, with style (solid\/dashed\/dotted\/double), width, height, and color.<\/p>\n\n<p><strong>Style \u2014 Advanced<\/strong>\n* Gradient text (two colors + angle).\n* Text stroke (width + color).\n* Backdrop blur and a frosted-glass background preset.<\/p>\n\n<p><strong>Accessibility &amp; Performance<\/strong>\n* Respects <code>prefers-reduced-motion<\/code> at both the CSS and JavaScript level, and re-evaluates live if the visitor changes that preference mid-visit.\n* Decorative clones and icons are <code>aria-hidden<\/code>; real content and real links stay fully keyboard- and screen-reader-accessible.\n* No jQuery. Vanilla JavaScript only, loaded solely on pages that use the widget.\n* Assets are registered (not force-enqueued) so they only load where the widget is actually placed.<\/p>\n\n<h4>Requirements<\/h4>\n\n<ul>\n<li>Requires the free <a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\">Elementor<\/a> plugin to be installed and active. Elementor Pro is not required.<\/li>\n<\/ul>\n\n<h3>Usage<\/h3>\n\n<ol>\n<li>Drag the <strong>Motion Text<\/strong> widget onto your page.<\/li>\n<li>Under <strong>Content<\/strong>, add one row per item (name, headline, announcement, etc.). Add a URL to any row to make that item clickable.<\/li>\n<li>Under <strong>General Settings<\/strong>, choose a scroll direction and speed, and decide whether hover should pause the scroll.<\/li>\n<li>Under <strong>Advanced Motion<\/strong>, layer in fade edges, easing, reverse direction, or additional pause conditions as needed.<\/li>\n<li>Under <strong>Style<\/strong>, set typography, colors, background, border, spacing, shadows, hover effects, icons, dividers, and any of the Advanced effects (gradient text, text stroke, backdrop blur, glass effect).<\/li>\n<\/ol>\n\n<!--section=installation-->\n<ol>\n<li>Upload the <code>scrollora-marquee-for-elementor<\/code> folder to <code>\/wp-content\/plugins\/<\/code>, or install the plugin zip via <strong>Plugins \u2192 Add New \u2192 Upload Plugin<\/strong>.<\/li>\n<li>Activate the plugin through the \"Plugins\" screen in WordPress.<\/li>\n<li>Make sure Elementor is installed and active (WordPress will offer to install\/activate it automatically if it detects it's missing).<\/li>\n<li>Edit any page with Elementor and find the <strong>Motion Text<\/strong> widget under its own \"Motion Text\" category in the widget panel.<\/li>\n<li>Add your items in the Content tab, then fine-tune motion and appearance in the General Settings, Advanced Motion, and Style tabs.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20this%20plugin%20require%20elementor%20pro%3F\"><h3>Does this plugin require Elementor Pro?<\/h3><\/dt>\n<dd><p>No. It is built entirely against the free Elementor Developer API (<code>elementor\/widgets\/register<\/code>, <code>elementor\/elements\/categories_registered<\/code>) and works fully with Elementor Free.<\/p><\/dd>\n<dt id=\"does%20this%20plugin%20add%20a%20settings%20page%3F\"><h3>Does this plugin add a settings page?<\/h3><\/dt>\n<dd><p>No. There is no plugin-level dashboard or global settings screen. All configuration happens per-widget instance, inside the Elementor editor's own Content and Style tabs.<\/p><\/dd>\n<dt id=\"does%20this%20plugin%20use%20jquery%3F\"><h3>Does this plugin use jQuery?<\/h3><\/dt>\n<dd><p>No. The frontend behaviour is written in vanilla JavaScript. It does integrate with <code>elementorFrontend<\/code> (Elementor's own frontend framework) so the widget re-initializes correctly inside the Elementor editor's live preview.<\/p><\/dd>\n<dt id=\"will%20the%20scrolling%20animation%20play%20for%20visitors%20who%20prefer%20reduced%20motion%3F\"><h3>Will the scrolling animation play for visitors who prefer reduced motion?<\/h3><\/dt>\n<dd><p>No. The widget checks the <code>prefers-reduced-motion<\/code> media feature both in CSS and in JavaScript, and shows a single static, non-animated line of items instead \u2014 updating live if the visitor changes that OS\/browser preference while your page is open.<\/p><\/dd>\n<dt id=\"does%20the%20plugin%20store%20any%20settings%20or%20data%20of%20its%20own%3F\"><h3>Does the plugin store any settings or data of its own?<\/h3><\/dt>\n<dd><p>No. Every setting lives in the page's own Elementor data (post meta), exactly like any other Elementor widget. The plugin itself creates no custom database tables, options, or transients, so there is nothing left behind if you uninstall it.<\/p><\/dd>\n<dt id=\"i%20only%20added%20two%20short%20items%20%E2%80%94%20why%20doesn%27t%20the%20loop%20look%20empty%20or%20gappy%3F\"><h3>I only added two short items \u2014 why doesn't the loop look empty or gappy?<\/h3><\/dt>\n<dd><p>The widget measures the rendered width of your items and automatically clones them client-side, as many times as necessary, until the track is at least as wide as its container, before duplicating that set once more for the seamless loop. This keeps the scroll gap-free regardless of how few or how short your items are.<\/p><\/dd>\n<dt id=\"can%20i%20use%20custom%20icons%20before%20or%20after%20each%20item%3F\"><h3>Can I use custom icons before or after each item?<\/h3><\/dt>\n<dd><p>Yes. The Style \u2192 Icons section lets you enable a before-icon and\/or after-icon, chosen from Elementor's built-in icon library, with independent size, color, and gap controls.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.0<\/h4>\n\n<p>First public release. Combines all functionality developed through the project's internal Parts 1\u20135 into a single, audited, production-ready version.<\/p>\n\n<p><strong>Foundation<\/strong>\n* PSR-4-style autoloader scoped to the <code>MotionTextElementor<\/code> namespace.\n* Strict requirement checks (PHP version, Elementor presence\/activation, Elementor minimum version) with actionable, dismissible admin notices and one-click install\/activate links for administrators.\n* Elementor integration registered on the correct, official extension points (<code>elementor\/elements\/categories_registered<\/code>, <code>elementor\/widgets\/register<\/code>, <code>elementor\/frontend\/before_register_styles<\/code>, <code>elementor\/frontend\/before_register_scripts<\/code>), fully compatible with Elementor Free.\n* Dedicated \"Motion Text\" widget category in the Elementor panel.<\/p>\n\n<p><strong>Motion Engine<\/strong>\n* True, gap-free, seamless infinite marquee loop, built and measured client-side from a single authoritative server-rendered set of items.\n* GPU-accelerated animation via CSS <code>transform: translate3d()<\/code>; JavaScript only measures layout and assigns the animation once per (re)build \u2014 never on a per-frame basis.\n* Flicker-free re-initialization on resize and inside the Elementor editor's live preview.\n* ResizeObserver-based responsive recalculation, with a debounced window-resize fallback for older browsers.<\/p>\n\n<p><strong>Advanced Motion<\/strong>\n* Optional responsive fade edges with a custom color.\n* Reverse direction (flips a running animation in place, without restarting it) and five easing curves.\n* Start offset control, so multiple widget instances don't scroll in visual lock-step.\n* Three independent, combinable pause conditions: hover\/focus, viewport visibility, and browser-tab visibility.\n* GPU-acceleration toggle.<\/p>\n\n<p><strong>Style Controls<\/strong>\n* Typography, Colors (normal\/hover\/active), Background (classic\/gradient), Border, Spacing, Shadow (text\/box), Hover Effects (scale\/opacity\/transition), Icons (before\/after, with size\/color\/gap), Dividers (style\/width\/height\/color), and an Advanced section (gradient text, text stroke, backdrop blur, glass-effect preset).\n* Every applicable control is responsive (desktop\/tablet\/mobile) and updates live in the Elementor editor.<\/p>\n\n<p><strong>Accessibility, Security &amp; Performance<\/strong>\n* Full <code>prefers-reduced-motion<\/code> support, re-evaluated live if the preference changes.\n* Decorative clones and icons are <code>aria-hidden<\/code>; real links and text remain fully accessible to assistive technology and keyboard navigation.\n* Every dynamic output is escaped (<code>esc_html()<\/code>, <code>esc_url()<\/code>, Elementor's own attribute\/icon rendering); every control value is validated against an explicit allow-list before use (e.g. easing, direction).\n* No jQuery; vanilla JavaScript only. Assets are registered, not force-enqueued, so they load only on pages that actually use the widget.\n* No plugin-level database tables, options, or transients \u2014 nothing to clean up on uninstall.<\/p>","raw_excerpt":"Create beautiful infinite scrolling text, marquee, and ticker animations with a native Elementor widget.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/en-gb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/351618","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/en-gb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/en-gb.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/en-gb.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=351618"}],"author":[{"embeddable":true,"href":"https:\/\/en-gb.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/kamalnath26"}],"wp:attachment":[{"href":"https:\/\/en-gb.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=351618"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/en-gb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=351618"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/en-gb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=351618"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/en-gb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=351618"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/en-gb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=351618"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/en-gb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=351618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}