How do I bind the "transform" section?

Hi. I’m trying to bind the “transform” so I can transform an element based on a bool variable. How can I do this? I tried a few ways (like putting a literal string containing the same values), but didn’t work.

Ultimately, what I’m trying to do is animate a section to “slide open” based on the click of a button. So I want the y scale to transform from 0 to 1 when the button is clicked (i.e. when the bool var is set to true).

The expecting string is a valid css transform string (we will soon have a help tooltip to indicate you this)

In your usecase, you probably want to use scale(0) and scale(1) (or maybe more usualy, translate?).

if(isOpen, "scaleY(1)", "scaleY(0)")

Then just add a transition property to have smooth transition between the two.

I copied the transform CSS from the HTML when the transform is unbound. Once I bind the value, the CSS disappears from the style. Check it out below:

Before:

After:

On the formula you do not need the transform: part, only the part after :slight_smile:

Worked! No “transform” and no semi-colon.

1 Like