I tried it on a different element that is always visible and it worked fine. So, it seems to me that it is the visibility issue
Okay changed up the visibility settings and that error doesn’t appear anymore, but the object is also not changing shape. After testing out a few other things, it appears that this code will not alter the width if that change in width contradicts other style settings on the element or it’s parents.
For instance, if the current width settings have a min width of 10 and max of 100, the code will not change the width to 150 but it will change it to 90. This is probably the new Responsiveness Engine issue you talked about.
I’ll have to play around with it a bit to figure out how to make it all work, but if you have a way for the code to override these other settings, I would love to know!
I’d like to share a method I used without employing any code, the bubble way 
It’s a bit tricky but I will try my best to explain it…
Essentially, the concept involves having two identical icons stacked together within a single container, which we’ll refer to as icon A and icon B.
Icon A maintains its default size.
While Icon B is configured with the desired height or width.
The container holding these two icons should have a container layout set to “align to parent” to ensure that the icons are stacked. Additionally, it should have a custom state named “A or B” set to text, for the purpose of easier understanding I set mine to text; later, I’ll explain why.
You should also ensure that those two icons are positioned in the same location within the container so that they appear stacked together.
On the condition for icon A, ensure that if the custom state, namely “A or B,” of the parent containing these two icons is hovered over or clicked (or any condition you want to trigger this), and the custom state is set to “B,” then make icon A not visible. Additionally, ensure that icon A is visible on page load.
Should look like this…
For icon B, the condition will be similar, but instead of hiding it, it should be visible. Also, ensure that icon B is not visible on page load.
Now, go to the workflow and set the state of the container’s custom state, namely “A or B,” and set the value to “B” when the container is hovered.
Preview…
While not hovering…
While hovering…
Hope this will help someone 