# Ignition Perspective Pipe line water flow animation

**URL:** <https://forum.inductiveautomation.com/t/ignition-perspective-pipe-line-water-flow-animation/64212>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [September 19, 2022, 3:39am UTC](https://forum.inductiveautomation.com/t/ignition-perspective-pipe-line-water-flow-animation/64212 "2022-09-19T03:39:21Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alagumani\_Kaliyaperu](https://avatars.discourse-cdn.com/v4/letter/a/8baadc/32.png) [@Alagumani\_Kaliyaperu](https://forum.inductiveautomation.com/u/Alagumani_Kaliyaperu)\
**Post date:** [September 19, 2022, 3:39am UTC](https://forum.inductiveautomation.com/t/ignition-perspective-pipe-line-water-flow-animation/64212/1 "2022-09-19T03:39:21Z")

</div>

Hi i want to animate Perspective Pipe lines look like water flowing, based on Boolean and Int tags. Please share your ideas Thanks.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [September 19, 2022, 12:49pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-pipe-line-water-flow-animation/64212/2 "2022-09-19T12:49:50Z")

</div>

What exactly are you looking for? Something like this,  
https://codepen.io/JavRok/embed/preview/EXMyXW?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=EXMyXW

---

<div class="post-metadata">

**Author:** ![Alagumani\_Kaliyaperu](https://avatars.discourse-cdn.com/v4/letter/a/8baadc/32.png) [@Alagumani\_Kaliyaperu](https://forum.inductiveautomation.com/u/Alagumani_Kaliyaperu)\
**Post date:** [September 20, 2022, 1:09am UTC](https://forum.inductiveautomation.com/t/ignition-perspective-pipe-line-water-flow-animation/64212/3 "2022-09-20T01:09:26Z")

</div>

Yes Exactly like this, In ignition perspective. can you share the procedure.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [September 20, 2022, 4:45pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-pipe-line-water-flow-animation/64212/4 "2022-09-20T16:45:29Z")

</div>

I’m not the best to ask on this, perhaps @victordcq has a better approach. But here is an example (not quite like the one above), paste this into a View.

```auto
[
  {
    "type": "ia.shapes.svg",
    "version": 0,
    "props": {
      "viewBox": "0 0 149.36 96.872",
      "elements": [
        {
          "elements": [
            {
              "d": "m21.458 92.737v93.996l48.249 0.3574v-57.542h44.675v30.736c51.823 0.3574 51.466 0 51.466 0",
              "fill": {
                "paint": "#C0C0C000"
              },
              "name": "path1193",
              "stroke": {
                "paint": "#4ECD57",
                "width": 5
              },
              "type": "path"
            }
          ],
          "name": "layer1",
          "transform": "translate(-18.958 -92.737)",
          "type": "group"
        }
      ],
      "style": {
        "classes": "lineMove"
      }
    },
    "meta": {
      "name": "Line_1"
    },
    "position": {
      "x": 140,
      "y": 436,
      "height": 220,
      "width": 386
    },
    "custom": {}
  }
]

```

Here is the CSS

```auto
.psc-lineMove {
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  animation: dash 20s linear infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 1000;
  }
}

```

---

<div class="post-metadata">

**Author:** ![Alagumani\_Kaliyaperu](https://avatars.discourse-cdn.com/v4/letter/a/8baadc/32.png) [@Alagumani\_Kaliyaperu](https://forum.inductiveautomation.com/u/Alagumani_Kaliyaperu)\
**Post date:** [September 21, 2022, 3:05am UTC](https://forum.inductiveautomation.com/t/ignition-perspective-pipe-line-water-flow-animation/64212/5 "2022-09-21T03:05:25Z")

</div>

@jlandwerlen Thanks for your support, Could please give me the brief idea about this.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 21, 2022, 6:41am UTC](https://forum.inductiveautomation.com/t/ignition-perspective-pipe-line-water-flow-animation/64212/6 "2022-09-21T06:41:53Z")

</div>

Seems good, i dont really do much with animations, but this is probably the way to go.

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [September 21, 2022, 8:27am UTC](https://forum.inductiveautomation.com/t/ignition-perspective-pipe-line-water-flow-animation/64212/7 "2022-09-21T08:27:24Z")

</div>

[![](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/8/5846f0d3962b333b3e922add3a07a2e8ec159e7f.jpeg "Using Animate.css and custom CSS in Perspective") ](https://www.youtube.com/watch?v=PRiJdjYrowk)

---

<div class="post-metadata">

**Author:** ![chaoliang](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@chaoliang](https://forum.inductiveautomation.com/u/chaoliang)\
**Post date:** [September 1, 2023, 1:46am UTC](https://forum.inductiveautomation.com/t/ignition-perspective-pipe-line-water-flow-animation/64212/8 "2023-09-01T01:46:18Z")

</div>

Hi, I was trying to paste the json script to a new using Shift + right click + paste jason, but looks like the format is incorrect with additional square bracket, but after removing the square bracket and import, it show blank screen.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [September 1, 2023, 2:21pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-pipe-line-water-flow-animation/64212/9 "2023-09-01T14:21:07Z")

</div>

Sorry, not sure why I did it that way, but just paste into an opened view.

Here is the JSON

```auto
{
  "custom": {},
  "params": {},
  "props": {},
  "root": {
    "children": [
      {
        "meta": {
          "name": "Line_1"
        },
        "position": {
          "height": 220,
          "width": 386,
          "x": 156,
          "y": 208
        },
        "props": {
          "elements": [
            {
              "elements": [
                {
                  "d": "m21.458 92.737v93.996l48.249 0.3574v-57.542h44.675v30.736c51.823 0.3574 51.466 0 51.466 0",
                  "fill": {
                    "paint": "#C0C0C000"
                  },
                  "name": "path1193",
                  "stroke": {
                    "paint": "#4ECD57",
                    "width": 5
                  },
                  "type": "path"
                }
              ],
              "name": "layer1",
              "transform": "translate(-18.958 -92.737)",
              "type": "group"
            }
          ],
          "style": {
            "classes": "lineMove"
          },
          "viewBox": "0 0 149.36 96.872"
        },
        "type": "ia.shapes.svg"
      }
    ],
    "meta": {
      "name": "root"
    },
    "type": "ia.container.coord"
  }
}

```