Character Wrap Marquee Text Effect

Previously we looked at a simple Marquee scrolling effect where a line of text slides towards one direction, exits the screen, then reappears on the other side.

If you want to take a look at that effect you can find it here: https://support.cranksoftware.com/hc/en-us/community/posts/9660777149204-Marquee-Scrolling-Text-Effect

Today we’ll be looking at a similar effect, but this time instead of the text only reappearing once the entire string has disappeared, this effect will appear as though it is wrapping each character in the string to the opposite side of where the text is disappearing.

For example, it would look something like:

(scrolling in → direction)

Sample Text
t Sample Tex
xt Sample Te
ext Sample T
Text Sample
e Text Sampl
le Text Samp

There are a few approaches you can use in order to achieve this effect, there is no single “correct” approach.

Start off by creating a control with two text render extensions and ensure that each text r.ext has the same string. In this case, I’m using “Sample Text”:

We will need to make it so that one of these text r.exts is positioned outside the bounds of the control so it isn’t visible. We’ll do this by adjusting the text r.exts X parameter. 

As you can see the X field is bound to a variable called “x”. The other render extension has the same parameter bound to another variable: “x_2”.

Finally we just have to create an animation that scrolls the text along the same direction and once one of the text r.exts has reached a set “end point” it will reset to the opposite side.

In this case, the overall start position is -105 and the end (reset) position is 105. Halfway between the two is 0, naturally. 

Since x_2 starts at 0, this means it has to travel half the distance that x does. For this reason you can see that the animation step for x is 4 seconds and each x_2 step is 2 seconds; half that time.

With all that together we end up with an effect that looks like this: