Scrolling Text Tutorial

As an homage to the very first tutorial ever posted in the Community, I’m going to create a quick scrolling text demo.

For reference, the scrolling text I’m going to replicate is like a stock ticker or a news ticker that scrolls along the bottom of your TV screen.

Stock-Ticker-Tape

Here’s a quick demo - just click on the text to see it in action:
https://thunk.app/w/-9KnAUVwz

This really reminds me of the much maligned <Marquee> tag in HTML, but it’s surprisingly easy to create in Thunkable so read on.

1. Design your app

In this example the phrase "The quick brown fox jumps over the lazy hedgehog. " is going to continuously scroll across the screen.

Note that our sentence ends with a full stop and a space.

2. Move the first letter to the end of the label.

With this first set of blocks, we take the first letter in the label and copy it to the end of the label.

3. Remove the first letter

Now that the first letter is copied to the end of the label we can go ahead and remove the first letter with the next four blocks.

4. Set the scrolling Speed

Using the built-in wait block we can choose how fast the text is going to update, or scroll. The lower this number is, the faster it will appear to move.

5. Rinse and repeat

Finally, wrap the whole thing in a forever loop to make the scrolling happen continuously and you’re done! The whole thing takes about 15 blocks and can be done with just one component.

Did you notice our new events?

Also, the keen-eyed amongst you will have noticed that the whole thing is triggered by clicking on the Label component.

5_label_click

We have recently added new events to the Label, the TextInput and the Image components. Hope you enjoy them!

Remix

Here’s the remix link so you can customised this project for yourself.

https://x.thunkable.com/copy/f09e498a8514fb469cfbff691e97a535

3 Likes

Wonderful !!

But,
In the Text Input feature if you can add a multiline text or batch text input feature that would be great.

1 Like

I’m not sure what you mean by batch input - would this be like copy and paste? What would you like this demo to do @tanish?

1 Like

By batch list,
I mean to say that if we can create a list in text input
Like-:

  1. List item 1
  2. List item 2
  3. List item 3

and the numbering system should be automatic.

Thanks

Very good design but in some way it might stop working, how can i fix it?

agree

1 Like

Did you made any changes with forever block?

no,just as before. It sometime (mostly) works but just occasionally it quit working

Is this problem happens in Live test
Or
in apk as well

yes

Well, the whole idea is that it would be like a news feed or a stock ticker, so after the first item the next item would scroll by horizontally.

It wouldn’t be possible to have them stacked vertically like you have in your post:

Automatic numbering is another thing, but it’s also quite easy to do with a counter variable.

1 Like

preview on the web works btw

@zbk0612eip8w does the web app work for you:

Will a counter variable create a automatic numbering in Text input?

i need to live test so please give me that remix link to the one you just created thanks

domhnall had already given this link in first post

1 Like

@tanish @domhnallohanlon the web app works perfectly only on live test it mostly works but might sometimes stop scrolling

Why you want to work it in live test?

It works in web app but in live test its not working

It can, yes. If you update the counter after each new input then the numbering will increment.

1 Like

Can you suggest me a post or tell me in brief? :slightly_smiling_face: