[00:00] In our previous lesson, we examined some options for basic animations in the Advanced Stylesheet to help inform and engage end users. We'll continue that discussion in this lesson where we'll look at some examples of how to activate an animation using real time data. To begin, we'll return to my winery project and our existing Advanced Stylesheet. These are the same styles that we used in Basic Animations Part One to create a more unified, standard look and set up some of our first animations. Beyond the base styling for our project in part one, we set up a simple pump animation in the Advanced Stylesheet that used keyframes to fade between two colors and spin the rotor. This animation was tied to this single pump using a combination of the blinkyYellow domId and the built-in Perspective style classes for the body and the rotor of the pump. Let's take another step forward in our animation journey with the Advanced Stylesheet and tie a state value and our existing yellow blinking animation together to create the illusion that our wine tank is emptying via the valve when the fill level reaches a certain predetermined point and the valve opens. There's a tag that tracks the state of the valve that I've bound to the state property and the Perspective Property Editor. Based on the tag data, in our view, the color of the valve changes as it opens and closes according to the default styling within Perspective.

[01:28] It turns white when it's in an open state and gray when it's in a closed state. I'd like to change that so that when the valve opens, that component uses our blinking yellow-orange animation from Part One instead. In this case, we only want to apply these changes to this single valve on this particular tank, so I'm going to create a domId in the Perspective Property Editor. I'll name it valveYellow. This ID will help us limit the reach of the changes we want to make to just this one white wine tank setup. To replace the default colors with the animation, we'll need to use the dev tools in the browser to find different parts of the valve component and figure out which classes are associated with the states of open and closed.

[02:12] Then we can tie those classes to the valveYellow domId and set the animation to activate when the valve is in an open state. Let's go to the project browser, click on views, right-click on our view, and select LaunchURL to look at our valve in the browser. If I right-click on the valve and inspect it, I can see the different parts of the valve here. Let's look more closely at the classes attached to some of those. If we wait until the valve opens and turns white, you can see the change from a double-dash closed suffix on some of the classes to a double-dash open. So these are the classes we'll need to tie to our domId and focus on in our Advanced Stylesheet. I'll switch back to the style sheet and add in the missing link to our animation. This uses the domId valveYellow with the built-in Perspective styling classes tied to the different parts of the valve when the valve is open.

[03:08] It should replace the default white open valve color with our blinking yellow-gold animation from the Advanced Stylesheet. Let's go see it in action. Now, let's do another example of a data-dependent animation, just for fun. I've got a multi-state button here in my Perspective view. I'd like to use it as another kind of visual state indicator instead of using it as an actual clickable multi-state button in this case. I'm going to turn one of the buttons into a flashing neon sign when the valve opens. This is to demonstrate how you can find more complex and dynamic CSS selectors and put them to use in the Advanced Stylesheet to override default styles and trigger animations instead, with timing based on a real-time data flow. We'll begin by selecting the multi-state button that will be turning into our second visual state indicator.

[04:04] In the Perspective Property Editor, let's go to states and expand all three of the items in the array. Let's tie each to one of our three options for our valve state-- Partially Closed, Closed, and Open. For index zero, I'll change the text to Partially Closed. For index one, I'll put in Closed. Finally, for index two, I'll add Open. I'll take note of the value associated with each. We'll use those values a little later as we set up some of the property bindings for this component. Let's focus on the indicatorValue next. We won't be using these as clickable buttons for this purpose, only as a state indicator sign, so we can create a property binding solely on the indicator Value by clicking on the chain link icon next to that property name. I'll select property and then use the Browse Properties button to link it to the state of my valve that's bound to the tag data. When we set up the text for the different buttons and looked at the index values before, each one is tied to a different value.

[05:10] Partially Closed is associated with a value of two, Closed with a value of zero and Open with a value of one. We'll need to add a map transform to this binding by clicking on the Add Transform button and selecting Map. The mapping process begins by designating a fallback value. Next, we'll need to add in the other input values and tell the transform what value to convert each of the strings to. Here, I'll add closed and set the output value to zero. Then I'll put in open and set that to one as the output value. Last, I'll add partiallyClosed and make two its output value. This is just translating the input into into an output that the button will understand, so when the valve is in a particular state, according to the tag data, the correct part of the multi-state button will be activated based on the number passed on.

[06:08] For example, we're mapping open to one. Now that we've established the bindings and mappings, in addition to our valve animation from earlier, we also have another basic indicator of the valve state in the view. Next, let's replace the default behavior for the open button so that when the valve opens automatically, the state change triggers an emphatic expand animation on this one Open button. We need to do a little detective work to find the perfect selectors for our CSS, so let's head back to the browser. I'll inspect the open button in the multi-state button and take a look at the associated CSS. There are a few things that stand out to me immediately with these classes. The default CSS adds either dash dash unselected or dash dash selected as a suffix to trigger the default behavior and styles on those parts of the multi-state button. If I want to create an animation and apply it to just the selected button, we'll use this.

[07:08] The thing is, I want to be more particular about just applying the animation to this one open button, so let's get even more specific. I can use an attribute selector to target this open button. An attribute selector in CSS does a match on an explicitly set attribute and its value such as a data attribute. We're in luck, since we have this to work with. We'll use that attribute with some bracket notation in our CSS like this, so only the open button gets targeted for our animation. We've got one more step, though. If we want to ensure that this animation only fires on this particular open button, on this specific component, we need to add a domId. Let's go back to our designer. I'll make sure my component is selected, go over to the Perspective Property Editor, and add a new domId in the meta section.

[08:03] Let's call it #expand. Now, let's head back to our style sheet, create our animation, and assemble our very specific CSS selector to target this one button. Here we're setting up an expand and contract effect using the scale property with the added bonus of a text color shift. Our detective work has paid off-- our combo of the domId, the data attribute and open value in brackets, and our built-in Perspective class with the selected suffix should allow us to give our users another separate visual cue that the valve is open and flowing. Let's check it out. Perfect. Since we're not using these as actual buttons, you could use the same basic process to create different visual indicators via unique animations for each valve state, so that someone glancing at the screen would be able to assess the situation clearly and quickly. Animations with the Advanced Stylesheet offer plenty of opportunities to enhance the user experience within Perspective and display realtime data in a visually engaging format.

[09:13] Part of the gift that comes with using the Advanced Stylesheet is the ability to completely transform components, extend their possibilities, break down previous barriers, and use animations to communicate with end users in new and innovative ways.