# Scrolling text in ui-text? (ticker)
**URL:** https://discourse.nodered.org/t/scrolling-text-in-ui-text-ticker/78211
**Category:** Dashboard
**Created:** [5 May 2023 15:03 UTC](https://discourse.nodered.org/t/scrolling-text-in-ui-text-ticker/78211 "2023-05-05T15:03:55Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [5 May 2023 15:03 UTC](https://discourse.nodered.org/t/scrolling-text-in-ui-text-ticker/78211/1 "2023-05-05T15:03:55Z")
How can i get a smooth scrolling effect of a text in a widget , this is what i have done so far, not very smooth, and i am sure not right method.
there are some posts on vertical scrolling (add new line, and move the old one top kind of thing, but i am looking for horizontal scrolling) [Here](https://discourse.nodered.org/t/scrolling-text-box-on-dashboard/2788)
```auto
[{"id":"73f388d6e187c7a1","type":"ui_button","z":"18e2f3c66d61a086","name":"SCROLLING TEXT","group":"dd6a48a52cad3d74","order":2,"width":"18","height":1,"passthru":false,"label":"{{payload}}","tooltip":"","color":"black","bgcolor":"white","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":600,"y":660,"wires":[[]]},{"id":"a4015729d041b423","type":"change","z":"18e2f3c66d61a086","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"I WANT THIS TEXT TO SCROLL MORE SMOOTHLY","tot":"str"},{"t":"set","p":"length","pt":"msg","to":"$number($moment().format(\"ss\"))\t","tot":"jsonata"},{"t":"set","p":"payload","pt":"msg","to":"$substring(payload, 0, length)\t","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":660,"wires":[["73f388d6e187c7a1"]]},{"id":"8ac5040f5a3b2f59","type":"inject","z":"18e2f3c66d61a086","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":190,"y":660,"wires":[["a4015729d041b423"]]},{"id":"dd6a48a52cad3d74","type":"ui_group","name":"HEADER","tab":"d90e028674af84a9","order":1,"disp":false,"width":"44","collapse":false,"className":""},{"id":"d90e028674af84a9","type":"ui_tab","name":"LIVE","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
```
EDIT:
there was some information here, looks like what i want, but i have absolutely no idea how to get this done with ui-template node. hope some one will be helping me out.
[Scrolling ticker example](https://discourse.nodered.org/t/trying-to-create-a-news-ticker-in-node-red/57200/2)
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [5 May 2023 15:46 UTC](https://discourse.nodered.org/t/scrolling-text-in-ui-text-ticker/78211/2 "2023-05-05T15:46:33Z")
CSS animation should work
```auto
[{"id":"64c1a1ab0fd513a2","type":"inject","z":"1d319bc3005a51a2","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Then change to this if i want adifferent text","payloadType":"str","x":170,"y":780,"wires":[["3b323530d14f9ad7"]]},{"id":"3b323530d14f9ad7","type":"ui_template","z":"1d319bc3005a51a2","group":"2d4fe667.28f8ba","name":"","order":25,"width":0,"height":0,"format":"\n\n {{msg.payload}}\n
","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":400,"y":720,"wires":[[]]},{"id":"8ac5040f5a3b2f59","type":"inject","z":"1d319bc3005a51a2","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"I want this text to scroll across the screen smoothly","payloadType":"str","x":170,"y":720,"wires":[["3b323530d14f9ad7"]]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":2,"disp":true,"width":"12","collapse":false,"className":""},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
```
[Fountain of knowledge](https://stackoverflow.com/questions/45847392/pure-css-continuous-horizontal-text-scroll-without-break)
[edit] You could also apply the css directly to the ui text,
---
### Author:  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [5 May 2023 16:09 UTC](https://discourse.nodered.org/t/scrolling-text-in-ui-text-ticker/78211/3 "2023-05-05T16:09:50Z")
> [@E1cid](#):
>
> You could also apply the css directly to the ui text,
Yes, Perfect. Thank You
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [19 May 2023 16:10 UTC](https://discourse.nodered.org/t/scrolling-text-in-ui-text-ticker/78211/4 "2023-05-19T16:10:46Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.