I have a button with icon and text . I would like to rotate the icon of the button when my custom property is true and stop spinning when false . I am able to spin an icon when not used in the button. but not in the button . any ideas why and how?
I'm guessing you're working in Vision. Please edit to add the Vision or Perspective tag from the dropdown below the post title.
You can do this in perspective by creating a style that selects the svg that’s a child of the div that gets created behind the scenes when you make a button with an icon. You would conditionally apply this style when you want the icon to spin.
.psc-spinning-icon-button div svg{
animation: waiting 1.5s linear infinite;
}
@keyframes waiting {
100%{
transform:rotate(360deg);
}
}
4 Likes
Please show the configuration of the button in your screenshot.
I see you added the “perspective” tag so I’m going to give you a little more details to make sure you understand how to do this.
I’m assuming you’re dragging a button onto your form and adding an icon using the button’s “icon.path” property. When you view source in the browser’s developer mode you can see that a button consists of a “div” that contains another “div” and an “svg”. The inner div is the text on the button and the SVG is the icon. Since we only want to rotate the icon, I made the selector apply to an svg that is a child to a div that the style class is applied to.
the “psc-” portion of the style class is a prefix you have to put on styles in the advanced style sheet. When you use the styles you exclude that. I forgot to mention you have to add this code to the advanced style sheet. You can add an advanced style sheet to your project by right clicking on the “Style” folder and selecting “advanced style sheet”. When you do this you will see a new node called “stylesheet.css”.
Copy/paste the style from my first reply along with the keyframes animation into your advanced style sheet and save the project. Then you just apply a binding onto the “style.classes” for the button that adds this style whenever you want the icon to spin. Note that the selector on the style class limits it to only apply to the SVG on the button.
Edit:
Don’t forget, you don’t include the “psc-” portion of the style name to apply it to your button. So your binding will add a style called “spinning-icon-button”
I take this opportunity to ask how you manage this.
For example with the action performed I could set the new class, but how to “reset” it?
It depends on how complicated the conditions are that animate the button. I usually put a binding with a map transform on the style class applying to the button. This allows you to apply different styles to the button based on whatever conditions you want to use to control what the button looks like.
If you’re getting states from indirect tags it’s a good idea to add custom properties with indirect bindings to get the values from the tags (don’t use the tag function in an expression). Then you can use an expression or map transform to apply the appropriate CSS style.
You can also track the state and the processing condition separately and apply the appropriate styles using an expression or script transform. Expression transforms are a little faster but sometimes less readable depending on your logic. It’s a design decision when it makes sense to take a small performance hit in exchange for more readable logic.
You can apply multiple style classes to the same thing by simply putting spaces between them so you can have one style class for color animations and another for the spinning animation.
1 Like
thanks for taking the time 
I was assuming that if I apply the animation to the icon style itself it should work like a normal icon .
your solution works , thanks so much
To add to Steve’s answer to this, if you're waiting on something in a script, I normally create a loading custom prop, write this to True in the script before the long process, then set back to False once done. Then the loading value is used to add remove the spinning class
that is exactly what I am doing
Could you please elaborate on how you handle whether an event has ended or not? I really can't figure it out; the only thing that comes to mind is using a timer, but I imagine that's not the case.