# How to? Icon color property toggle between two values, but flash/animate while in transition **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [July 21, 2026, 12:43am UTC](https://forum.inductiveautomation.com/t/how-to-icon-color-property-toggle-between-two-values-but-flash-animate-while-in-transition/116470 "2026-07-21T00:43:32Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![sxmsl](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@sxmsl](https://forum.inductiveautomation.com/u/sxmsl)\ **Post date:** [July 21, 2026, 12:43am UTC](https://forum.inductiveautomation.com/t/how-to-icon-color-property-toggle-between-two-values-but-flash-animate-while-in-transition/116470/1 "2026-07-21T00:43:32Z")
Hi there, I am modifying a component to add flashing animation between two colors while an item is in transition. Currently, the icon _props.color_ is easily assigned to either white or green depending on the presence of an item. This is done via simple, one line expression binding, outputting constant "white" or "green". `if(itemPresent, "white", "green")` While maintaining the binary color choice, I would like it to also animate between the two while the object is in a transition phase - i.e. 'conveyor in motion'. - Item not present and conveyor not moving -\> white - Item present and conveyor not moving -\> green - Conveyor is moving, expecting item -\> pulse white/green at 1hz. I found that adding a Style Class and indexing it for Animated is suggested for how to manipulate this property with respect to time. This also works on its own - muting _props.color_. The trick is layering them both together. In _props.color_, using a Map Transform for my Style Class, it literally outputs the name of the style class (or the object, I suppose) rather than executing the Style class. So, this cannot be done within color AFAICT. Separately, adding _classes_ under _style_, I can add a Map Transform to output **and** execute my style class. I can't seem to do both as _props.color_ overrides _props.style.classes_ (where I would actually like to switch that) and they seem to be incompatible types so I cannot figure how to stitch them together in some expression. Any ideas here? Thanks in advance. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [July 21, 2026, 1:22am UTC](https://forum.inductiveautomation.com/t/how-to-icon-color-property-toggle-between-two-values-but-flash-animate-while-in-transition/116470/2 "2026-07-21T01:22:06Z")
> [@sxmsl](#): > > Currently, the icon _props.color_ is easily assigned to either white or green depending on the presence of an item. This is done via simple, one line expression binding, outputting constant "white" or "green". `if(itemPresent, "white", "green")` You should not be doing any "animation" like this through expressions; you should handle this directly inside style classes (CSS) so that the animation happens locally in the browser (ultra fast) rather than via the gateway (slow and inefficient). That aside, style classes (i.e. CSS rules) are applied to components via the various `classes` props, e.g. most commonly `style.classes`. They apply the CSS styles defined within them to the component itself. For example if the style class contains `color: black`, it would write the component's colour prop to `black`. You cannot apply a style class to a specific prop like `props.color` - this doesn't make sense. CSS rules are applied based on their specificity. The higher the specificity, the higher its priority. Styles that are defined on the element itself are of the highest specificity (with the exception of styles applied with the `!important` override), such as `props.color`. Defining the colour here will override any other definition of this you try apply via style classes, so you need to make sure that the `props.color` is not set (i.e. is blank ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/3/534f287a238e96ec79b9a6e089c6b61e11158078.png) ) in order to let the style class set it ---
**Author:** ![sxmsl](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@sxmsl](https://forum.inductiveautomation.com/u/sxmsl)\ **Post date:** [July 21, 2026, 1:27am UTC](https://forum.inductiveautomation.com/t/how-to-icon-color-property-toggle-between-two-values-but-flash-animate-while-in-transition/116470/3 "2026-07-21T01:27:58Z")
Thanks for the insight on executing on backend vs front end. I can understand the utility in the CSS style classes. What I can't figure out is how to apply the nested logic to style class. Basically - `if inMotion then animate elseif itemPresent then "green" else "white"` ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [July 21, 2026, 1:32am UTC](https://forum.inductiveautomation.com/t/how-to-icon-color-property-toggle-between-two-values-but-flash-animate-while-in-transition/116470/4 "2026-07-21T01:32:20Z")
These would all be individual style classes. i.e. Styles: Stopped\_ItemNotPresent (your white colour) Stopped\_ItemPresent (your green colour) Running\_ItemExpected (animated flash between colours) Then you simply switch between these style classes to change the styles applied. (Obviously group and name these styles better...) ---
**Author:** ![sxmsl](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@sxmsl](https://forum.inductiveautomation.com/u/sxmsl)\ **Post date:** [July 21, 2026, 1:33am UTC](https://forum.inductiveautomation.com/t/how-to-icon-color-property-toggle-between-two-values-but-flash-animate-while-in-transition/116470/5 "2026-07-21T01:33:22Z")
Ahh, I see... Creating multiple style classes just for a single color each seems a bit cluttered, but I'll give it a go. Thanks ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [July 21, 2026, 1:34am UTC](https://forum.inductiveautomation.com/t/how-to-icon-color-property-toggle-between-two-values-but-flash-animate-while-in-transition/116470/6 "2026-07-21T01:34:01Z")
> [@sxmsl](#): > > Creating multiple style classes just for a single color Don't think of them as colours, think of them as styling for the device _states_ Also, for the colours themselves, I would be using CSS variables to store these, like this in your adv. stylesheet (or better your CSS theme): ```python --device-state-running: green; --device-state-stopped: hsl(0, 0, 60%); ``` and then reference these inside the style classes with `var(--device-state-running)` ---
**Author:** ![sxmsl](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@sxmsl](https://forum.inductiveautomation.com/u/sxmsl)\ **Post date:** [July 21, 2026, 1:36am UTC](https://forum.inductiveautomation.com/t/how-to-icon-color-property-toggle-between-two-values-but-flash-animate-while-in-transition/116470/7 "2026-07-21T01:36:07Z")
> Don't think of them as colours, think of them as styling for the device _states_ In some other context, I could appreciate that distinction/perspective. In my situation, these are literally some small beacon lights of specific colors within a much larger screen. So literally these Styles will be used only for these specific icons, each of a specific color. Sort of a lot of digging for the next person to come along for dev who might not be savvy on props.style.classes. Where the current method of coloring in props.color is very 'in your face' and impossible to misunderstand. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [July 21, 2026, 1:44am UTC](https://forum.inductiveautomation.com/t/how-to-icon-color-property-toggle-between-two-values-but-flash-animate-while-in-transition/116470/8 "2026-07-21T01:44:31Z")
Hmm, well instead of defining the colours then in the style classes, you _could_ use a filter inside the style class instead which changes the brightness of the colour defined in the element style (`props.color`) to make it white... it's far less flexible, but if it's only the colour that changes it should work. In the style classes for white and animated white pulsing, don't set a `color` and instead add `; filter: brightness(10)` to one of the string prop values (e.g. background image) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/3/33c8d4ed49b362a70443c4c9290954050892def1.png) This will essentially just change the brightness of the colour you set on the `props.color` prop to make it white. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/6/d6aafd40f279475b3cdf2fb86fa2e24b4467652d.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/4/448f28de02728b6a409b5eda0b5c5590dda5f53a.png) I wouldn't call it the nicest setup though... ---
**Author:** ![sxmsl](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@sxmsl](https://forum.inductiveautomation.com/u/sxmsl)\ **Post date:** [July 21, 2026, 1:54am UTC](https://forum.inductiveautomation.com/t/how-to-icon-color-property-toggle-between-two-values-but-flash-animate-while-in-transition/116470/9 "2026-07-21T01:54:29Z")
Thanks for that example. I'll try it out to see how it fits. I do have to say though, this strikes me as a clumsy solution for a simple feature add. As far as I understand, the only reason for me to use Style Class is effectively to leverage the utility of the timer function being handled implicitly. Unfortunately, the trade-off is that it makes a super simple detail into an awkward multi-step configuration. is there not some internal system variable timer I could reference and AND it? Such as 100ms, 1s timers? ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [July 21, 2026, 2:28am UTC](https://forum.inductiveautomation.com/t/how-to-icon-color-property-toggle-between-two-values-but-flash-animate-while-in-transition/116470/10 "2026-07-21T02:28:18Z")
> [@sxmsl](#): > > is there not some internal system variable timer I could reference and AND it? Such as 100ms, 1s timers? Both of these would require back and forth to the gateway for animation purposes, which puts more strain on the gateway (less scalable) and means animations will be more laggy (e.g. "1s" might be a range from 0.5s-1.5s; 100ms would be impossible, and would result in very sporadic animation). The idea of style classes is to move bespoke, magic styling into a centralised global space which makes managing, maintaining, and ultimately delivering projects easier with far better styling standardisation. It adds more weight to upfront configuration though. If you're used to working in Vision or in most other SCADA platforms where styling is all element-based, I can understand your frustration. But webpages and by extension Perspective, need a paradigm shift. _Element_-based styling is clumsy by comparison; simpler to configure yes, but much harder to manage and maintain in the long run, as well as being very easy to end up with very different styling standards across pages ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [July 21, 2026, 11:13am UTC](https://forum.inductiveautomation.com/t/how-to-icon-color-property-toggle-between-two-values-but-flash-animate-while-in-transition/116470/11 "2026-07-21T11:13:45Z")
> [@nminchin](#): > > The idea of style classes is to move bespoke, magic styling into a centralised global space which makes managing, maintaining, and ultimately delivering projects easier with far better styling standardisation. 💯 ---
**Author:** ![sxmsl](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@sxmsl](https://forum.inductiveautomation.com/u/sxmsl)\ **Post date:** [July 21, 2026, 9:28pm UTC](https://forum.inductiveautomation.com/t/how-to-icon-color-property-toggle-between-two-values-but-flash-animate-while-in-transition/116470/12 "2026-07-21T21:28:17Z")
I get it. I get it. I can tell this is the proper way. As often goes, I did not create the project. I'm just temporarily involved and adding some eye-candy to the HMI where possible. So I'm not trying to rip the whole project apart or add in funky aspects that deviate from existing. I'll try the multiple classes and see where that gets me. Maybe I can get some coworkers to buy-off as well. Thanks for the help here. ---
**Author:** ![sxmsl](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@sxmsl](https://forum.inductiveautomation.com/u/sxmsl)\ **Post date:** [July 30, 2026, 6:21pm UTC](https://forum.inductiveautomation.com/t/how-to-icon-color-property-toggle-between-two-values-but-flash-animate-while-in-transition/116470/13 "2026-07-30T18:21:21Z")
Just following up here to say thanks. I did the 3 style classes as prescribed, and it worked beautifully. I even made a cute little 'ConveyorStatusAnimation' folder to hold them. I was just worried about some unknowing fellow down the line coming to this and being absolutely clueless on how it works, as has happened to me many times until I do some digging and figure it out. Ultimately a satisfying feeling, but not everyone appreciates the 'aha' experience quite the same. They'll figure it out eventually. Ignition is pretty amazing. And thanks for being great support. The community here is A++