[feature-15630]Tag binding to style class animation properties

Hello
Is it possible to change style class animation properties like “Duration” by tag binding or scripting?
Specially with different key frame value.
For example instead of hard code opacity value, at @ 100% keyframe in style class sheet I can change it depend on a tag.

No, this isn’t possible. Your style classes are emitted onto the page as a single static stylesheet on initial page load - reloading them dynamically would be a huge performance hit. I do think we need a better way to support dynamic CSS, but it most likely won’t be at the root style class level like this.

What a bout these two methods:
method 1:
1- right clicking on object
2 - select custom css3 option
3 - it open a black page to write user custom css3
The page can reference parameters or tag by {{ }} in css3 code
for example:
@keyframes mymove {
from {top: 0px;}
to {top: {{myTag}};}
}

or
Method 2:
Add a object in in props -> style with reserved “keyframes” key word
keyframes: ‘mymove’
from:
top: 0px
to:
top: 200px
or
keyframes: “mymove { from {top: 0px;} to {top: 200px;}}”
pass setting as JSON string to it then perspective parse it.

It is game changer for us to create superb HMI.
I believe ignition should not make every thing easy for user, the web concept is easy enough for every body. By letting user use directly css3 by himself, both performance and creativity increase and developer team free to make option in platform. Like promise drawing tools.

2 Likes

Hmm, the special handling for keyframes sub-property in styles is interesting…I’ll file a ticket to review that, good thought! :+1:

:pray::pray::pray::pray::pray::pray::pray::pray::pray::pray:
just leave all css3 details to us to handle (integrator)

1 Like

isn’t it a bigger performance hit if he has to make style classes for every option and load the right style class dynamically based on the tagvalue

No, because it’s actually loading the style classes in the first place that’s “slow”. Changing which style class applies to an element is easy, and something web browsers are well optimized for.