How to make text scroll within PowerApps

C
Collab365 TeamAuthorPublished Jan 1, 2019
4

At a Glance

Target Audience
PowerApps Developers, Canvas App Makers
Problem Solved
Creating dynamic scrolling text animations in static PowerApps canvas layouts
Use Case
Adding news tickers, status notifications, or engaging UI animations to canvas apps

Most developers treat PowerApps like a digital filing cabinet. They build static forms, connect a database, and call it a day. But if you want your apps to feel alive, you have to stop thinking in static layouts and start thinking in frames per second.

You do not need a complex animation library to build custom UI elements. You just need a basic timer control and a little bit of math.

Let's build a smooth scrolling marquee. It is a simple trick, but it forces you to understand how coordinate mapping actually works on the canvas.

The Static Asset

First, drop a text label onto your screen and format your message. Resize the label so the bounding box hugs the text perfectly.

Now, we strip away the hardcoded position. Set the label's X property to a variable named vvMessageX.

The editor will throw a red error flag. Ignore it. The variable does not exist yet. We are going to build the engine that creates it.

The Engine

Timers in PowerApps are the heartbeat of any automation. They run code in the background, repeatedly, until you tell them to stop. Go to the Insert ribbon and drop a timer onto your screen.

Timer duration operates in milliseconds. To make the math easy, remember that 1000 equals exactly one second. Set the duration to 500 and flip the Repeat toggle to true.

The Logic

Every timer has an OnTimerEnd property. This dictates what happens when the clock runs out. We want our text to move forward every half second. To do this, we use the UpdateContext function to create a screen-local variable.

UpdateContext({vvMessageX: vvMessageX + 10})

If you test this now, your text will slowly jump across the screen and disappear forever. We need a loop. The text needs to reset its position the moment it crosses the screen width boundary.

Update your formula to include a simple IF statement:

UpdateContext(
{
    vvMessageX: If(
        vvMessageX > Screen1.Width,
        -Label1.Width,
        vvMessageX + 10
    )
}
)

The Physics

A 500ms timer moving 10 pixels is choppy. It feels like a PowerPoint presentation from 1998. You have to balance the duration against the pixel increment to get smooth motion.

Push the hardware. Drop the timer duration to 1ms and change the position increment to 5 pixels. The text will now glide seamlessly across the screen.

Finally, clean up your UI. A visible timer on a production app is sloppy. Select the control, change AutoStart to true, and flip Visible to false.

You do not need massive budgets or custom code components to build engaging tools. You just need to understand the basic mechanics of the platform. Master the timer control, manipulate the X and Y coordinates, and you stop building forms. You start building software.