Scrolling Text Tutorial

Tutorials and DIY Guides
1

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.

1_append_first_letter
1_append_first_letter1658×320 38.4 KB

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.

2_remove_first_letter
2_remove_first_letter2356×376 67.4 KB

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.

3_pause
3_pause2408×502 72.8 KB

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.

4_repeat
4_repeat2416×600 77.5 KB

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

4 Likes
2

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
3

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 @tobi?

1 Like
4

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

6

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

agree

1 Like
7

Did you made any changes with forever block?

8

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

9

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

10

yes

11

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
12

preview on the web works btw

13

@zbk0612eip8w does the web app work for you:

14

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

15

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

16

domhnall had already given this link in first post

1 Like
17

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

18

Why you want to work it in live test?

19

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

20

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

1 Like
21

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