# Make a component or text flash

**URL:** <https://forum.inductiveautomation.com/t/make-a-component-or-text-flash/100437>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [January 3, 2025, 7:29pm UTC](https://forum.inductiveautomation.com/t/make-a-component-or-text-flash/100437 "2025-01-03T19:29:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jeff\_Muldoon](https://avatars.discourse-cdn.com/v4/letter/j/ce73a5/32.png) [@Jeff\_Muldoon](https://forum.inductiveautomation.com/u/Jeff_Muldoon)\
**Post date:** [January 3, 2025, 7:29pm UTC](https://forum.inductiveautomation.com/t/make-a-component-or-text-flash/100437/1 "2025-01-03T19:29:49Z")

</div>

I've got a request from our COO to make certain values change when over a certain level. For example, I'm using a 14 segment display to show a temperature and I'd like it to flash red when over... lets say 400. Currently I have an expression that looks at the tag and changes the color to red if greater than 400 else it is green. I'd like for it to also flash, but am kinda stuck on if thats possible. Alternatively, a red square, that would frame my view and would be invisible if the temperature was in the acceptable range, but once outside become visible and then flash.

I'm guess this can happen, but not quite sure how complex it is to do, or if I'm just totally missing something

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [January 3, 2025, 7:41pm UTC](https://forum.inductiveautomation.com/t/make-a-component-or-text-flash/100437/2 "2025-01-03T19:41:35Z")

</div>

create a Style Class, we'll call it `flash`. In the "Edit Style" Dialog in the top right, check the check box for Animated. This will make the configuration options for an animation available.

Click on the `100%` key frame marker on the far right of the animation time line. Set the styles to fit your need. In this case something like setting the background to your "red" color.

Configure a binding on the components style.classes property, with an expression like below:

```python
if({value} > 400, 'flash', ''

```

Now, when your value is above 400, the component will transition between the default background and the red one.

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [January 3, 2025, 7:43pm UTC](https://forum.inductiveautomation.com/t/make-a-component-or-text-flash/100437/3 "2025-01-03T19:43:50Z")

</div>

> [@Jeff\_Muldoon](#):
>
> a red square, that would frame my view and would be invisible if the temperature was in the acceptable range, but once outside become visible and then flash.

I would recommend this approach, which can also be achieved using the method that lrose detailed above. It falls more in line with proper HMI/interface design methodology.

---

<div class="post-metadata">

**Author:** ![Jeff\_Muldoon](https://avatars.discourse-cdn.com/v4/letter/j/ce73a5/32.png) [@Jeff\_Muldoon](https://forum.inductiveautomation.com/u/Jeff_Muldoon)\
**Post date:** [January 3, 2025, 9:53pm UTC](https://forum.inductiveautomation.com/t/make-a-component-or-text-flash/100437/4 "2025-01-03T21:53:17Z")

</div>

I've got it working, albeit crudely. I put an svg image in, but for this application I think I can just use the border fill to do the job.