# Animation for Symbol Factory In Perspective

**URL:** <https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110>\
**Category:** Ignition\
**Tags:** ignition81, vision, perspective\
**Created:** [August 17, 2022, 6:26pm UTC](https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110 "2022-08-17T18:26:26Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![ejaegler](https://avatars.discourse-cdn.com/v4/letter/e/df788c/32.png) [@ejaegler](https://forum.inductiveautomation.com/u/ejaegler)\
**Post date:** [August 17, 2022, 6:26pm UTC](https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110/1 "2022-08-17T18:26:26Z")

</div>

Greetings,  
I am working on converting a Vision HVAC project to a Perspective Project. In the vision project, I use a timer to animate the rotation of a cooling fan. Is there a good way of going about this in perspective?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/4/44f4cba4161845d143eb36bf75cd84eeef44d9a3.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:** [August 17, 2022, 6:30pm UTC](https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110/2 "2022-08-17T18:30:46Z")

</div>

Can you upload the SVG so we can play with it?

---

<div class="post-metadata">

**Author:** ![ejaegler](https://avatars.discourse-cdn.com/v4/letter/e/df788c/32.png) [@ejaegler](https://forum.inductiveautomation.com/u/ejaegler)\
**Post date:** [August 17, 2022, 6:45pm UTC](https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110/3 "2022-08-17T18:45:56Z")

</div>

The file is from the symbol factory in ignition.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/4/a4e955c2a195cf49f64db8d565e19a695eb65555.png)

---

<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:** [August 17, 2022, 6:49pm UTC](https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110/4 "2022-08-17T18:49:37Z")

</div>

Maybe `transform: rotate()` ?

---

<div class="post-metadata">

**Author:** ![ejaegler](https://avatars.discourse-cdn.com/v4/letter/e/df788c/32.png) [@ejaegler](https://forum.inductiveautomation.com/u/ejaegler)\
**Post date:** [August 17, 2022, 7:24pm UTC](https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110/5 "2022-08-17T19:24:00Z")

</div>

I added the key value of transform: rotate() and nothing happened. If I add change it to transform: rotate(30), I end up with the blades moving. I wonder if I am doing the transform wrong

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/f/8f97361a6b4cd2e4cde527675938f177eb7a6f11.png)

---

<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:** [August 17, 2022, 7:38pm UTC](https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110/6 "2022-08-17T19:38:21Z")

</div>

That’s about the extent of my CSS knowledge. @victordcq is the CSS king, I’m sure he can weigh in on this.

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [August 17, 2022, 8:05pm UTC](https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110/7 "2022-08-17T20:05:37Z")

</div>

Maybe try adding `transform-origin: center` along with `transform: rotate(30)`…

---

<div class="post-metadata">

**Author:** ![Matthew.gaitan](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@Matthew.gaitan](https://forum.inductiveautomation.com/u/Matthew.gaitan)\
**Post date:** [August 17, 2022, 8:07pm UTC](https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110/8 "2022-08-17T20:07:42Z")

</div>

This can definitely be done using css.

You’ll need a style prop with 2 components within:

```auto
{
  "classes": "",
  "animation": "spin 1s linear infinite",
  "transformOrigin": "center"
}

```

as well as have an animation keyframe (in my case it’s called spin) defined within a custom theme:

```auto
@keyframes spin { 
    0% {
        transform:rotate(0deg);
    }
    100% {
        transform:rotate(360deg);
    }
}

```

Info on how to create a custom theme is housed at this location on your gateway install: `%installDirectory%\data\modules\com.inductiveautomation.perspective\themes\README.md`

Info on where the @keyframes stuff came from: [CSS endless rotation animation - Stack Overflow](https://stackoverflow.com/questions/6410730/css-endless-rotation-animation)

---

<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:** [August 17, 2022, 9:25pm UTC](https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110/9 "2022-08-17T21:25:44Z")

</div>

I did verify that this works:

```auto
/* Spin */
.psc-spin {
  animation: spin 1s linear infinite;
  transform-origin: center
}

@keyframes spin { 
    0% {
        transform:rotate(0deg);
    }
    100% {
        transform:rotate(360deg);
    }
}

```

Then just apply style “spin”,  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/e/ae63e8514429a9242714f30122b7ace03b338b87.png)  
[Fan.zip](https://forum.inductiveautomation.com/uploads/short-url/8JV60esxHpsU6w1SfFm4qXDJkej.zip) (9.5 KB)

---

<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:** [August 18, 2022, 6:35am UTC](https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110/10 "2022-08-18T06:35:07Z")

</div>

animation is the way to go like @Matthew.gaitan suggested

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [August 18, 2022, 12:03pm UTC](https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110/11 "2022-08-18T12:03:11Z")

</div>

You can do like @Matthew.gaitan has shown, that will definitely work, however, you can also just piggyback on IA’s own animation class as well.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/c/0c1896f28012f84f2784ac52b113e159b31998ab.png)

The animation value is:

```css
ia_symbolComponent__animate--rotate linear infinite

```

The `transform-origin` comes from the center point used in `element 4` of the SVG.

---

<div class="post-metadata">

**Author:** ![Matthew.gaitan](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@Matthew.gaitan](https://forum.inductiveautomation.com/u/Matthew.gaitan)\
**Post date:** [August 18, 2022, 2:58pm UTC](https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110/12 "2022-08-18T14:58:42Z")

</div>

nice! I didn’t realize IA had their own animation class already built in

---

<div class="post-metadata">

**Author:** ![ejaegler](https://avatars.discourse-cdn.com/v4/letter/e/df788c/32.png) [@ejaegler](https://forum.inductiveautomation.com/u/ejaegler)\
**Post date:** [August 23, 2022, 4:32pm UTC](https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110/13 "2022-08-23T16:32:16Z")

</div>

Sorry for the delay in getting back to these responses. I’m attempting to use the suggestion @lrose mentioned, but I cannot find the transform-origin or the animation in the list with I select the + sign next to style. Is there somewhere else I need to look?  
Thanks

---

<div class="post-metadata">

**Author:** ![witman](https://avatars.discourse-cdn.com/v4/letter/w/d2c977/32.png) [@witman](https://forum.inductiveautomation.com/u/witman)\
**Post date:** [August 23, 2022, 4:45pm UTC](https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110/14 "2022-08-23T16:45:21Z")

</div>

Many properties are not in the menus, but you can enter them manually.

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [August 23, 2022, 5:28pm UTC](https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110/15 "2022-08-23T17:28:23Z")

</div>

You have to type them in manually. Add a value and change the key as appropriate.

---

<div class="post-metadata">

**Author:** ![ejaegler](https://avatars.discourse-cdn.com/v4/letter/e/df788c/32.png) [@ejaegler](https://forum.inductiveautomation.com/u/ejaegler)\
**Post date:** [August 23, 2022, 5:42pm UTC](https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110/16 "2022-08-23T17:42:49Z")

</div>

Thanks for the help.

---

<div class="post-metadata">

**Author:** ![ejaegler](https://avatars.discourse-cdn.com/v4/letter/e/df788c/32.png) [@ejaegler](https://forum.inductiveautomation.com/u/ejaegler)\
**Post date:** [August 24, 2022, 1:56pm UTC](https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110/18 "2022-08-24T13:56:26Z")

</div>

One last question. I have the animation working now (I had a typo on the transform-origin). I would like this animation to be enabled when a tag is true (ie fans running). How would I go about doing this?

---

<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:** [August 24, 2022, 2:03pm UTC](https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110/19 "2022-08-24T14:03:51Z")

</div>

There are several ways, one method is to bind to the `animation-duration` property using an expression. When you want it stopped write 0ms, when you want it running write a non-zero value.

Something like this,

```auto
if({[MyTags]Running},'2000ms','0ms')

```

---

<div class="post-metadata">

**Author:** ![ejaegler](https://avatars.discourse-cdn.com/v4/letter/e/df788c/32.png) [@ejaegler](https://forum.inductiveautomation.com/u/ejaegler)\
**Post date:** [August 24, 2022, 3:04pm UTC](https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110/20 "2022-08-24T15:04:12Z")

</div>

That worked! Thanks!

---

<div class="post-metadata">

**Author:** ![Joshua\_Myers](https://avatars.discourse-cdn.com/v4/letter/j/ce7236/32.png) [@Joshua\_Myers](https://forum.inductiveautomation.com/u/Joshua_Myers)\
**Post date:** [October 16, 2023, 10:00pm UTC](https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110/21 "2023-10-16T22:00:40Z")

</div>

I tried this but can't get it to work. Does my transform-origin need to be different?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/8/e851af6ff7af2edb7376ac456ba61f074b01e9b9.png)