# Perspective Marquee Table

**URL:** <https://forum.inductiveautomation.com/t/perspective-marquee-table/59555>\
**Category:** Ignition\
**Tags:** perspective, ignition81, scripting\
**Created:** [May 13, 2022, 6:20pm UTC](https://forum.inductiveautomation.com/t/perspective-marquee-table/59555 "2022-05-13T18:20:31Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![splata](https://avatars.discourse-cdn.com/v4/letter/s/3bc359/32.png) [@splata](https://forum.inductiveautomation.com/u/splata)\
**Post date:** [May 13, 2022, 6:20pm UTC](https://forum.inductiveautomation.com/t/perspective-marquee-table/59555/1 "2022-05-13T18:20:31Z")

</div>

Hello there is a way to make that in table on perspective??

[https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/4/34ccbd8d067ca81fb8f2f2a374e1ae9c27cbacbb.mp4](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/4/34ccbd8d067ca81fb8f2f2a374e1ae9c27cbacbb.mp4)

---

<div class="post-metadata">

**Author:** ![Cody\_Daniel](https://avatars.discourse-cdn.com/v4/letter/c/87869e/32.png) [@Cody\_Daniel](https://forum.inductiveautomation.com/u/Cody_Daniel)\
**Post date:** [May 13, 2022, 7:24pm UTC](https://forum.inductiveautomation.com/t/perspective-marquee-table/59555/2 "2022-05-13T19:24:57Z")

</div>

I’m not incredibly experienced, but I was able to create something like this using the View Canvas component. You can set the top property binding like shown in the [Inductive University video](https://inductiveuniversity.com/videos/view-canvas/8.1) . I made the reset work by another expression binding on the duration property.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/2/32dc7140b29e334fa5150f4b356ffcd1d3991127.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [May 13, 2022, 8:07pm UTC](https://forum.inductiveautomation.com/t/perspective-marquee-table/59555/3 "2022-05-13T20:07:15Z")

</div>

Here’s a CSS solution.

![Marquee vertical](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/a/ea1563953310dd5872effdcd58cb7829eb1b6b2a.gif)

It consists of a label inside a flex container and a style class “marquee”.

Paste the code below into your view’s root.

> **Marquee components JSON**
>
> ```auto
> [
> {
> "type": "ia.container.flex",
> "version": 0,
> "props": {
> "style": {
> "overflow": "hidden",
> "borderStyle": "solid",
> "borderWidth": 1,
> "borderColor": "#058823",
> "padding-left": "8px"
> }
> },
> "meta": {
> "name": "FlexContainer"
> },
> "position": {
> "x": 302,
> "y": 127,
> "height": 63,
> "width": 258
> },
> "custom": {},
> "children": [
> {
> "type": "ia.display.label",
> "version": 0,
> "props": {
> "text": "Text line 1\nText line 2\nText line 3\nText line 4",
> "textStyle": {
> "classes": "marquee",
> "whiteSpace": "pre",
> "overflow": "visible",
> "animation": "marquee 4s linear infinite"
> }
> },
> "meta": {
> "name": "Label"
> },
> "position": {
> "grow": 1,
> "basis": 400
> },
> "custom": {}
> }
> ]
> }
> ]
> 
> ```

- Create a new style called “marquee”.
- Set **Background** , **Background Image** to  
` } @keyframes marquee {from { transform: translateY(100%); } to {transform: translateY(-100%); } } {`
- Add a bit of left and right padding to the style class to suit.

It should all work.  
Modify to suit.  
Start at [W3Schools](https://www.w3schools.com/css/css3_animations.asp) if you want to learn more.

---

<div class="post-metadata">

**Author:** ![splata](https://avatars.discourse-cdn.com/v4/letter/s/3bc359/32.png) [@splata](https://forum.inductiveautomation.com/u/splata)\
**Post date:** [May 16, 2022, 9:41pm UTC](https://forum.inductiveautomation.com/t/perspective-marquee-table/59555/4 "2022-05-16T21:41:16Z")

</div>

wow it works , thankyou but how can i reduce the blank animation a try to reduce the trslation or size of the component but i can´t find reduce the blank animation.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [May 16, 2022, 10:19pm UTC](https://forum.inductiveautomation.com/t/perspective-marquee-table/59555/5 "2022-05-16T22:19:37Z")

</div>

I don’t know if it’s worth the trouble. You’re going to have other problems - the scroll speed will vary with the number of lines of text, etc. - and who is going to stand there waiting for the information to scroll by?

If you really want to persist then search for `pure css scolling vertical marquee`. Most solutions seem to have two copies of the text which, in your case, would scroll off the top of the view before jumping back down to the bottom.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [May 17, 2022, 1:35am UTC](https://forum.inductiveautomation.com/t/perspective-marquee-table/59555/6 "2022-05-17T01:35:49Z")

</div>

Is there a reason the Carousel doesn’t work for what you’re trying to do?