Perspective Style Class Breathing Synchronization

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.

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

Create a new markdown component and disable escapeHtml

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

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...