I’m working with custom SVGs in Perspective, and I would like to make some of these SVG elements blink.
Right now, I’m doing this using an expression binding, but the result is not very consistent and the blinking interval feels irregular.
In Vision there is a built‑in Blink function , which produces a clean and stable blink.
I’m wondering if Perspective has an equivalent feature, or if there is a recommended way to achieve a smooth, reliable blinking effect for SVG components.
Does Perspective provide something similar to Vision’s blinking behavior, or is there a best‑practice approach for this?
Create and assign an animated style class (or multiple classes, which you then assign via expression binding). If this doesn't work for your needs you can also look into the advanced CSS stylesheet.
Style Classes | Ignition User Manual
5 Likes
It may not be best practice, but I have a Boolean Expression Tag ("Pulse") with expression:
getSecond(now()) % 2
You can bind whatever property needs a 1 second pulse to that tag (color expression, visible, etc.)
I also went one step further to create another Boolean tag ("PulseIsActive") that lets me turn off the pulse tag. The complete expression in the Pulse tag is:
if(
{[.]PulseIsActive},
getSecond(now()) % 2,
false
)
1 Like
To add on to what @Bushmatic said, if you're binding to a property or tag, (looks like you're trying to reference a color property on your view), you can add a map transformation on it to map integer values to the style classes you set up. It's much cleaner and easier to work with that way.
Any time you're running scripts and expression bindings, it's going from gateway to client which adds lag which is the reason your flashing animation using an expression was inconsistent. Remember that all expression and scripts are executed on the gateway, not the client.
Animations of any kind, including flashing colours, should be handled client-side via CSS styling (or -- locally running -- javascript) . This is usually via perspective style classes with animation on them, or via the advanced stylesheet / css themes for more complex things, and then applied to the components via their props.styles.classes
6 Likes
