HTML Marquee Issue

(2) Share

Report

Posted on by Sajarac

3,293

Hi everyone,

I’m running into an issue with an HTML Text control in PowerApps that I was using to create a marquee-style scrolling message.

Here’s the HTML I’m using:

"<div style='background-color: transparent; color: white; padding: 0; border-radius: 5px; text-align: center; width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center;'>
  <marquee behavior='alternate' scrollamount='10' style='width: 100%; height: 100%; display: flex; align-items: center;'>
    <p style='margin: 0; font-size: 12px; line-height: 1.2;'>
      <span style='color: black;'>"& var_Text1&" </span>
      <span style='color: red;'>"& var_Text2&"</span>
      <span style='color: black;'> "&va_Text3&"</span>
    </p>
  </marquee>
</div>"

This was previously working fine and displayed the text in a scrolling (marquee) style. However, it has recently stopped working — the text no longer scrolls.

Has anyone experienced something similar?
Is this due to a recent change in PowerApps or HTML rendering support?

Any suggestions or alternative approaches would be greatly appreciated.

Thanks in advance!

PS/ I would prefer to stay away from adding a label + a timer

Categories:

Building Power Apps

I have the same question (0)

All responses (3)

Answers (0)

Sort by

Suggested answer

Kalathiya 2,456 Super User 2026 Season 1 on at

Like
a
(1)

Report
Copy link

Link copied!

Hello @Sajarac,

Might be happening because the <marquee> tag is no longer supported in the HTML Text control might be due to this reason it's not working in PoweApps. Also, CSS animations also don’t work reliably because the control blocks most advanced styling.

Right now there’s no real HTML-only fix for this. The simplest way to get the scrolling effect back is to use a Timer with a Label.

If this response resolves your issue, please mark it as the Verified Answer so it can help other community members as well.

---------------------------------------------------------------------------------

📩 Need more help? Just mention @Kalathiya and I’ll be happy to assist.

✔️ If this answer helped you, please tick “Does this answer your question?” so it can be marked as the Verified Answer.

💛 A Like always motivates me to keep contributing!

Was this reply helpful? Yes No
Suggested answer

11manish 3,333 on at

Like
a
(1)

Report
Copy link

Link copied!
Yes — you’re not doing anything wrong. This is due to a platform behavior change/limitation in Microsoft Power Apps.

Why your <marquee> stopped working

<marquee> is a deprecated HTML tag (obsolete in modern browsers)

Power Apps HTML Text control uses a sanitized/limited renderer

Recent updates have:

Reduced support for legacy tags like <marquee>

Blocked animations for performance/security reasons

So even though it worked earlier, it’s no longer reliably supported

Key Limitation

Power Apps HTML Text control does NOT support CSS animations or JS

So:

<marquee> → unreliable

@keyframes → not supported

JavaScript → not allowed

Recommended Alternatives
Option 1: Timer + Label (Official & Reliable)

I know you prefer to avoid it, but:

This is the only fully supported scrolling approach

Idea:

Use Timer

Update X position of Label

Label.X = Label.X - 2

Smooth

Fully controllable

Works everywhere

Option 2: Simulate scroll using HTML (limited)

You can fake “scroll” by updating text dynamically:

Mid(varFullText, varIndex, Len(varFullText))

But:

Not smooth like marquee

Needs Timer anyway

Option 3: Component-based scrolling (better UX)

Create:

Component with:

Label

Timer

Animation logic

Reusable
Clean architecture

Option 4: PCF Control (Best for enterprise)

Build custom control using:

React / Fluent UI

CSS animations

True marquee
High performance
Fully customizable

Recommended Approach

Since you want clean UX:

Use Component + Timer (best balance)

Use PCF control (best long-term)

Thanks
Manish

Visit my blog : https://powerappbuilder.blogspot.com/

Was this reply helpful? Yes No
Suggested answer

Sajarac 3,293 on at

Like
a
(0)

Report
Copy link

Link copied!

Thank you very much both for your prompt response.

Doing some research I guess in the meantime I should replace the HTML control with a SVG Image.

"data:image/svg+xml;utf8," & EncodeUrl(

"<svg width='300' height='50' xmlns='http://www.w3.org/2000/svg'>

<text

x='300'

y='50%'

font-size='18'

font-family='Arial, sans-serif'

text-anchor='middle'

dominant-baseline='middle'>

<animate

attributeName='x'

from='300'

to='-300'

dur='5s'

repeatCount='indefinite'/>

Scrolling text 🚀

</text>

</svg>"

)

Was this reply helpful? Yes No