# Perspective Style Class Breathing Synchronization

**URL:** <https://forum.inductiveautomation.com/t/perspective-style-class-breathing-synchronization/93304>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 16, 2024, 8:40pm UTC](https://forum.inductiveautomation.com/t/perspective-style-class-breathing-synchronization/93304 "2024-07-16T20:40:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![DdP](https://avatars.discourse-cdn.com/v4/letter/d/f6c823/32.png) [@DdP](https://forum.inductiveautomation.com/u/DdP)\
**Post date:** [July 16, 2024, 8:40pm UTC](https://forum.inductiveautomation.com/t/perspective-style-class-breathing-synchronization/93304/1 "2024-07-16T20:40:20Z")

</div>

Hi All,

I have a perspective style class called breathing. it fades in and out between two colours and works well. I use mapping to change the border style of a UDT instance when a certain number of alarms have been reached for the instance.

The problem is that they aren't synchronized between the UDT instances as they would become active at different times. is there a way to lock the timing of the style class that they use the same start-stop timing?

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

Thanks in advance

---

<div class="post-metadata">

**Author:** ![simeonw](https://avatars.discourse-cdn.com/v4/letter/s/4da419/32.png) [@simeonw](https://forum.inductiveautomation.com/u/simeonw)\
**Post date:** [July 17, 2024, 7:23am UTC](https://forum.inductiveautomation.com/t/perspective-style-class-breathing-synchronization/93304/2 "2024-07-17T07:23:29Z")

</div>

Other similar posts have discussed the topic, and the general consensus is that you can't do it with CSS only and it is quite involved to implement well with JavaScript.

> [@Perspective Styling animation sync](https://forum.inductiveautomation.com/t/perspective-styling-animation-sync/38587):
>
> Is there any way to make the styling animations synchronised across each component that uses them? [UnsyncdAnimation] [UnsyncdAnimation2] And if not possible without custom css now, is this a feasible idea request to add an option to a style class for the animation to be synchronous for all?

However, with some VERY janky JavaScript and @victordcq's Markdown injection method:

> [@Javascript inject in Perspective... have fun](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805):
>
> Soo i'll just link this here... You can do whatever with it, but its not really gonna be clean or easy xD Have fun man_mage WARNING Dont let userinput enter in here

Create a new markdown component and disable **escapeHtml**

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

Then create an expression binding on the **source** prop containing the style class to target and a script transform with the code below:

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

```python
def transform(self, value, quality, timestamp):
	code = """<img style='display:none' src='/favicon.ico' onload=\"	
		var targetNode = document.documentElement;
		var observerConfig = { subtree: true, attributes: true, attributeFilter: ['class'] };
		
		var mutationCallback = function(mutationsList, observer) {
		    mutationsList.forEach(function(mutation) {
		        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
		            var targetElement = mutation.target;
		            if (targetElement.classList.contains('psc-igStyleClass')) {
		                var elements = document.querySelectorAll('.psc-igStyleClass');
					    elements.forEach(function(element) {
					    	var animation = element.style.animation;
					    	element.style.animation = 'none';
					        void element.offsetWidth;
					        element.style.animation = animation;
					    });		              
		            }
		        }
		    });
		};
		
		var observer = new MutationObserver(mutationCallback);
		observer.observe(targetNode, observerConfig);
	\"></img>""".replace("\n", "").replace("\t", "").replace("igStyleClass",value)
	return code

```

The code basically setups a mutation observer, that monitors for the animated class being added to an element, then loops through all elements with that class and reset their animations. All animation will be reset to the start, which is not ideal...

---

<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:** [July 17, 2024, 8:09am UTC](https://forum.inductiveautomation.com/t/perspective-style-class-breathing-synchronization/93304/3 "2024-07-17T08:09:05Z")

</div>

> [@simeonw](#):
>
> `.replace("className",value)`

this is not really a save replace, because "className" is something that exists as an attribute in Js, you should use someting with a special character infront or something so its definitly not gonna be mistaken