# Animate Symbol factory

**URL:** <https://forum.inductiveautomation.com/t/animate-symbol-factory/90734>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [May 22, 2024, 1:03pm UTC](https://forum.inductiveautomation.com/t/animate-symbol-factory/90734 "2024-05-22T13:03:28Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![sebastien\_ng](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sebastien_ng/32/55297_2.png) [@sebastien\_ng](https://forum.inductiveautomation.com/u/sebastien_ng)\
**Post date:** [May 22, 2024, 1:03pm UTC](https://forum.inductiveautomation.com/t/animate-symbol-factory/90734/1 "2024-05-22T13:03:28Z")

</div>

Hello,

Would like use Symbol factory, but I haven't idea to animate it.  
For exemple, on perspective , if I choose a motor component, I can make annimation binding PROPS of motor.

But I haven't idea how to animate component of Symbol Factory.

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

Maybe there is lesson that I forgot see on IU.

Somme one car telle me how Symbol Factory work on Ignition ?

---

<div class="post-metadata">

**Author:** ![bschroeder](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bschroeder/32/13260_2.png) [@bschroeder](https://forum.inductiveautomation.com/u/bschroeder)\
**Post date:** [May 22, 2024, 1:06pm UTC](https://forum.inductiveautomation.com/t/animate-symbol-factory/90734/2 "2024-05-22T13:06:15Z")

</div>

Those are just static pictures. There isn't really anything to bind to. Maybe visible, the label in the symbol, background color etc... They don't animate, ie spin etc...

---

<div class="post-metadata">

**Author:** ![sebastien\_ng](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sebastien_ng/32/55297_2.png) [@sebastien\_ng](https://forum.inductiveautomation.com/u/sebastien_ng)\
**Post date:** [May 22, 2024, 1:10pm UTC](https://forum.inductiveautomation.com/t/animate-symbol-factory/90734/3 "2024-05-22T13:10:08Z")

</div>

Thank you @bschroeder  
If I understood correctly, you mean that we cannot animate symbol factories? even for example this FAN ?

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

---

<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:** [May 22, 2024, 1:12pm UTC](https://forum.inductiveautomation.com/t/animate-symbol-factory/90734/4 "2024-05-22T13:12:54Z")

</div>

can probably be done with css

---

<div class="post-metadata">

**Author:** ![bschroeder](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bschroeder/32/13260_2.png) [@bschroeder](https://forum.inductiveautomation.com/u/bschroeder)\
**Post date:** [May 22, 2024, 1:15pm UTC](https://forum.inductiveautomation.com/t/animate-symbol-factory/90734/5 "2024-05-22T13:15:06Z")

</div>

This is probably the only way, if at all.

---

<div class="post-metadata">

**Author:** ![sebastien\_ng](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sebastien_ng/32/55297_2.png) [@sebastien\_ng](https://forum.inductiveautomation.com/u/sebastien_ng)\
**Post date:** [May 22, 2024, 1:17pm UTC](https://forum.inductiveautomation.com/t/animate-symbol-factory/90734/6 "2024-05-22T13:17:27Z")

</div>

@victordcq thank you, I would like to know how to do it.

---

<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:** [May 22, 2024, 1:21pm UTC](https://forum.inductiveautomation.com/t/animate-symbol-factory/90734/7 "2024-05-22T13:21:44Z")

</div>

add this to stylesheet

```python
@keyframes rotateCenter {    
 0%{
    transform: rotate(0deg);
    transform-origin: 50% 50%
   }
100%{
    transform: rotate(360deg);
    transform-origin: 50% 50%
   }
}

```

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

and this to the correct style object in the svg

```python
{
  "classes": "",
  "animation": "rotateCenter 2s linear infinite"
}

```

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

(note transform-origin: wont always be needed for every svg, it just depends how it is made, so if you are rotating around something else change this value)  
(in this case you could see it rotating around the corner)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/d/ed3830f8561d14b175421f63cef059984bab0e6f.png)

you can use biding to change the animation prop, but dont use biding to change rotations, only use **animations** for fast, repeating rotations

---

<div class="post-metadata">

**Author:** ![sebastien\_ng](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sebastien_ng/32/55297_2.png) [@sebastien\_ng](https://forum.inductiveautomation.com/u/sebastien_ng)\
**Post date:** [May 22, 2024, 2:21pm UTC](https://forum.inductiveautomation.com/t/animate-symbol-factory/90734/8 "2024-05-22T14:21:00Z")

</div>

[quote="victordcq, post:7, topic:90734"]  
stylesheet  
[/quote] thank you.  
But I don't Understood sommething.

How I will know if this stylesheet.css is for Fan component ?

what is `@keyframes rotateCenter` ?

---

<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 22, 2024, 2:22pm UTC](https://forum.inductiveautomation.com/t/animate-symbol-factory/90734/9 "2024-05-22T14:22:21Z")

</div>

Try this: [CSS @keyframes Rule](https://www.w3schools.com/cssref/css3_pr_animation-keyframes.php)

---

<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:** [May 22, 2024, 2:33pm UTC](https://forum.inductiveautomation.com/t/animate-symbol-factory/90734/10 "2024-05-22T14:33:20Z")

</div>

> **[Style Classes | Ignition User Manual](https://docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/styles/style-classes#enabling-the-advanced-stylesheet)**
>
> A Style Class is a group of Style settings that are saved together. Style Classes can be applied to multiple components to provide consistency in design. A Style Class enables you to define style elements in one place, and then quickly apply that...

You create a animation (keyframe) with a name ( **rotateCenter** )  
Which you can refer to in the rotate css animition "animation": **rotateCenter**  
Everywhere you put this animation, the object will rotate around its center  
For the fan you'll want to select the group "impeller" to apply this too

---

<div class="post-metadata">

**Author:** ![sebastien\_ng](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sebastien_ng/32/55297_2.png) [@sebastien\_ng](https://forum.inductiveautomation.com/u/sebastien_ng)\
**Post date:** [May 22, 2024, 3:04pm UTC](https://forum.inductiveautomation.com/t/animate-symbol-factory/90734/11 "2024-05-22T15:04:00Z")

</div>

I dot it:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/0/a0126fa3fad3896abed93a1a96f5827da4883547.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/d/bd21bb8f157aac7e2fe42cec65f34916077e3c19.png)

When I click on preview mode, nothing is happen. Fan is not rotating 🙂

---

<div class="post-metadata">

**Author:** ![sebastien\_ng](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sebastien_ng/32/55297_2.png) [@sebastien\_ng](https://forum.inductiveautomation.com/u/sebastien_ng)\
**Post date:** [May 22, 2024, 3:04pm UTC](https://forum.inductiveautomation.com/t/animate-symbol-factory/90734/12 "2024-05-22T15:04:33Z")

</div>

thank you @Transistor

---

<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 22, 2024, 3:07pm UTC](https://forum.inductiveautomation.com/t/animate-symbol-factory/90734/13 "2024-05-22T15:07:24Z")

</div>

Spot the difference:  
 ![Spot the diff 1](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/f/6f034eda0c9ba00e7dfbde4aa69d28c889deeea8.png)

_Figure 1. Victor's instruction._

![Spot the diff 2](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/9/99491d4654a6d2c91cd4b487e9b3bd795c36a6b7.png)

_Figure 2. What you did._

Remove the `" .... "` quotes.

---

<div class="post-metadata">

**Author:** ![sebastien\_ng](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sebastien_ng/32/55297_2.png) [@sebastien\_ng](https://forum.inductiveautomation.com/u/sebastien_ng)\
**Post date:** [May 22, 2024, 3:09pm UTC](https://forum.inductiveautomation.com/t/animate-symbol-factory/90734/14 "2024-05-22T15:09:40Z")

</div>

omg, thank you I remove it and it work.

---

<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:** [May 22, 2024, 3:21pm UTC](https://forum.inductiveautomation.com/t/animate-symbol-factory/90734/15 "2024-05-22T15:21:22Z")

</div>

You can also use the predefined animation class that @lrose pointed out in this thread.

> [@Animation for Symbol Factory In Perspective](https://forum.inductiveautomation.com/t/animation-for-symbol-factory-in-perspective/63110/10):
>
> animation is the way to go like @Matthew.gaitan suggested