Marquee Scrolling Text Effect

There are quite a few ways to implement this behavior. 

Though currently there does not exist a type of setting you can simply check to make this happen.

First we have to look at how we can scroll the text horizontally. Generally speaking the simplest ways to move the text would be through manipulating either the Layer’s internal grd.xoffset, the Control’s X position, or the Text Render Extension’s X position.

Each approach has a different element being manipulated, so the one you choose will be based on how your application has been designed/architected.

For example, manipulating the Layer’s grd.xoffset means that every control on the Layer will be moved as well. Manipulating the Control’s X position means all of the render extensions on that control will be moved as well. Manipulating the Text Render Extension’s X position will only move the text and no other elements.

You could create an animation that adjusts one of the above elements to make it scroll for the desired amount.

Here’s a simple animation which adjusts the Layer’s grd.xoffset over time and then resets it to be off-screen at the end. The same exact animation could be used for any of the other elements mentioned before.


I’ve made the animation loop by setting the animation’s completion event as a trigger which then just calls the animation again.

Let’s take a look at what the completed result would look like for each of the mentioned model elements.

To preface: the Layer has two controls, one control contains a cyan rectangle outline and the text. The other control simply contains a green rectangle outline which is set to the default size of the Layer (the size of the screen).


Manipulating the Layer’s grd.xoffset:

As you can see, since the layer itself is moving, all of the content on the screen is scrolling.

Manipulating the Control’s X position:

Here the entire control including the rectangle and text is moving, while the layer (represented by the green rectangle control) remains still.

Manipulating the Text Render Extension’s X position:

Finally, you can see that only the text itself is moving while the control and layer remain still.


The specifics of each implementation will depend on your project’s complexity, but this is a simple overview of how to implement this scrolling marquee behavior.



  • Thank you!!!! This is basically what I am wanting to do.

    We have a current system that does something similar with LED matrix displays. I want to upgrade our product short term with text and later with graphics. Appreciate the help.


  • I don't think I am clear on how to utilize the Text Render Extensions X position. I am looking through the documentation and not finding reference to this attribute name. If my Text box for display is Text_Line_1 then I need something like $(app.Text.TextLine_1.grd_xxxxx) This would be applying it to application, text layer, TextLine_1 "control". But I am not clear what the xxxx should be.


  • You will need to create a variable on your GDE and bind it to your Text Render Extension's X position attribute.

    In your Control's Properties tab, you can see the attributes of the Render Extensions on the Control.
    The Text Render Extension's properties have a set of attributes under the Position menu:

    This is where you find the Text Render Extension's X position attribute.
    You can create and bind variables to these fields so that you can manipulate them.
    Simply click the green icon next to the attribute's up & down arrows. The screenshot above shows that I've already created a variable called x and bound it to this field. 

    If you've never created and bound a variable to one of a field before, check this guide out which goes over it in a bit more detail:



  • Thank you. That was the connection I missed. Still learning.

    Appreciate the assistance.


  • Happy to help!


Please sign in to leave a comment.

Didn't find what you were looking for?

New post