# Animating Tab Strip Navigation Component

**URL:** <https://forum.inductiveautomation.com/t/animating-tab-strip-navigation-component/17352>\
**Category:** Ignition\
**Created:** [March 13, 2018, 8:36pm UTC](https://forum.inductiveautomation.com/t/animating-tab-strip-navigation-component/17352 "2018-03-13T20:36:41Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![jeffkrol](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jeffkrol/32/3339_2.png) [@jeffkrol](https://forum.inductiveautomation.com/u/jeffkrol)\
**Post date:** [March 13, 2018, 8:36pm UTC](https://forum.inductiveautomation.com/t/animating-tab-strip-navigation-component/17352/1 "2018-03-13T20:36:41Z")

</div>

Howdy,

I am trying to animate my tab strips based on any unacknowledged alarms. I already have the tags and scripting in place to correctly detect alarms for each area. I was able to do this with some global scripts and a UDT combined with some nasty OR statements. All of that functionality has been proven out at this point.

Where I am struggling is how to actually color the tabs (flash red/yellow) if there is an alarm in a certain zone (i.e. tab). I don’t see any method for doing this in the “Tab Strip Customizer”. I thought maybe there would be some way to do this in the “Style Customizer”, but it seems like any style I create is going to be applied to the entire strip. I have thought of a really hacky solution using additional vector objects, but I will only do this if I have no other choice.

Thanks for reading this and in advance for anyone that is gracious enough to assist. 🙂

---

<div class="post-metadata">

**Author:** ![Stuart](https://avatars.discourse-cdn.com/v4/letter/s/cab0a1/32.png) [@Stuart](https://forum.inductiveautomation.com/u/Stuart)\
**Post date:** [March 13, 2018, 8:46pm UTC](https://forum.inductiveautomation.com/t/animating-tab-strip-navigation-component/17352/2 "2018-03-13T20:46:50Z")

</div>

I’ll play around with it a bit more, but you should be able to set something up to modify the dataset of the tab strip. Cell Update bindings.

---

<div class="post-metadata">

**Author:** ![jeffkrol](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jeffkrol/32/3339_2.png) [@jeffkrol](https://forum.inductiveautomation.com/u/jeffkrol)\
**Post date:** [March 13, 2018, 9:13pm UTC](https://forum.inductiveautomation.com/t/animating-tab-strip-navigation-component/17352/3 "2018-03-13T21:13:35Z")

</div>

Stuart,

Thanks. I’m OK with making incremental progress. The hard part of detecting alarms per zone is all programmed in. If I am just going to modify the tab dataset, I do not see a way to animate any colors. If that’s the case, I’ll start off with changing the color of a given tab/zone to a red background.

---

<div class="post-metadata">

**Author:** ![Stuart](https://avatars.discourse-cdn.com/v4/letter/s/cab0a1/32.png) [@Stuart](https://forum.inductiveautomation.com/u/Stuart)\
**Post date:** [March 13, 2018, 9:19pm UTC](https://forum.inductiveautomation.com/t/animating-tab-strip-navigation-component/17352/4 "2018-03-13T21:19:49Z")

</div>

My thinking is… You will use some scripting to take the alarm status, etc. of each zone, and convert that to a color. Then, using Cell Update bindings you can change the background color an individual tab.

You may have to use a middle component, or a hidden custom property, to do the conversion between an alarm status, and the color it represents.

Currently, I am trying to figure out how to change the color using a cell binding. I’m not sure what sort of data it is expecting!

---

<div class="post-metadata">

**Author:** ![jeffkrol](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jeffkrol/32/3339_2.png) [@jeffkrol](https://forum.inductiveautomation.com/u/jeffkrol)\
**Post date:** [March 13, 2018, 10:00pm UTC](https://forum.inductiveautomation.com/t/animating-tab-strip-navigation-component/17352/5 "2018-03-13T22:00:15Z")

</div>

Stuart,

It looks like a it’s a datatype object of “clr”. I did a basic test using the cell update function with this data:

`color(238,236,232,255)`

The dataset appeared to update, so I think I can make some progress on coloring the tabs a solid color. I agree that using some intermediary tags are likely the way to go. In terms of actually doing some animation to flash the colors, I might be able to do that using client timers, but I’m not too confident in their ability to toggle consistently (I haven’t used them much so a large portion of that is fear of the unknown).

---

<div class="post-metadata">

**Author:** ![Stuart](https://avatars.discourse-cdn.com/v4/letter/s/cab0a1/32.png) [@Stuart](https://forum.inductiveautomation.com/u/Stuart)\
**Post date:** [March 13, 2018, 10:06pm UTC](https://forum.inductiveautomation.com/t/animating-tab-strip-navigation-component/17352/6 "2018-03-13T22:06:54Z")

</div>

Take a look at this… It is crude, and simple, but maybe it’ll give you an idea of what to do. I am by no means an expert! There should be comments in a text area, and more in the scripting.

[NavigationFlash\_2018-03-13\_1405.proj](https://us1.discourse-cdn.com/inductiveautomation/original/2X/2/20ff9f17b9d91b6a893c3c0567569d385021c287.proj) (24.1 KB)

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [November 6, 2018, 1:23pm UTC](https://forum.inductiveautomation.com/t/animating-tab-strip-navigation-component/17352/7 "2018-11-06T13:23:19Z")

</div>

Has anyone noticed that if using animation/blink on a tab Ignition will slow down over time? Using Stuarts app as a test, I ran it and changing windows was fast, but would slow considerably over just a few minutes. I noticed this when I added animation to a tab strip style. CPU usage would rise a bunch as well.

I’m using 7.9.9. Is this a known issue?
