# Perspective Animation

**URL:** <https://forum.inductiveautomation.com/t/perspective-animation/95954>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [September 13, 2024, 1:37pm UTC](https://forum.inductiveautomation.com/t/perspective-animation/95954 "2024-09-13T13:37:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Maryam\_Saeed](https://avatars.discourse-cdn.com/v4/letter/m/a5b964/32.png) [@Maryam\_Saeed](https://forum.inductiveautomation.com/u/Maryam_Saeed)\
**Post date:** [September 13, 2024, 1:37pm UTC](https://forum.inductiveautomation.com/t/perspective-animation/95954/1 "2024-09-13T13:37:52Z")

</div>

Hello everyone,

I'm working on a project in Ignition Perspective and would like to add some animations to images in the interface. Specifically, I’m looking for ways to make certain images move, rotate, or pulse based on different triggers or events (e.g., button clicks, value changes, or even alarms).

Has anyone implemented animations in Perspective? If so, what are the best practices and tools to use? Are there any built-in animation components apart from the valve, container and motor or do I need to use custom CSS/JavaScript for this?

I need a moving conveyor in my perspective screen

Looking forward to your insights and recommendations!

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [September 13, 2024, 1:58pm UTC](https://forum.inductiveautomation.com/t/perspective-animation/95954/2 "2024-09-13T13:58:34Z")

</div>

Perspective style classes have a `Animated` checkbox in the top right corner. Check it and you'll see some options appear:

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

Now you can define a style for `0%` and another one for `100%`, and use the options to configure the transition from one state to the other.

You can also use a component's `props.style` to set up transitions from one state to another.  
For example if you set `opacity: 0` on some trigger, you can add `transition: opacity 500ms linear` to make it fade over 500ms instead of disappearing instantly.

The next step is using the stylesheet for animations, using `keyframes`.

Which method you chose depends on what you want to do.

---

<div class="post-metadata">

**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\
**Post date:** [September 13, 2024, 3:39pm UTC](https://forum.inductiveautomation.com/t/perspective-animation/95954/3 "2024-09-13T15:39:16Z")

</div>

I would recommend using the advanced style sheet for this. You can add an advanced style sheet to your project by right clicking on the "Styles" folder and selecting "Enable Advanced Stylesheet".

You can create custom CSS classes in there. You have to prefix them with ".psc-".

If you make a class called ".psc-flash-image" you would apply it to an object by putting "flash-image" in the "classes" property.

The reason I recommend using the advanced stylesheet is because the UI for the standard styles is limited and specifically the animations are limited. I don't think you can input ranges on the stops but maybe I just missed something. For example, I don't think you could do this blink animation in the standard styles:

```python
.psc-blink-visible{
	animation: blink 1.2s linear infinite;
}

 @keyframes blink {
   0%, 49.9%{
     opacity: 0;
   }
   50%, 100%{
     opacity: 1;
   }
 }

```