# How do I bind the "transform" section?

**URL:** <https://community.weweb.io/t/how-do-i-bind-the-transform-section/1312>\
**Category:** How do I?\
**Created:** [October 18, 2022, 5:01pm UTC](https://community.weweb.io/t/how-do-i-bind-the-transform-section/1312 "2022-10-18T17:01:17Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![sbkbdigital](https://avatars.discourse-cdn.com/v4/letter/s/a3d4f5/32.png) [@sbkbdigital](https://community.weweb.io/u/sbkbdigital)\
**Post date:** [October 18, 2022, 5:01pm UTC](https://community.weweb.io/t/how-do-i-bind-the-transform-section/1312/1 "2022-10-18T17:01:17Z")

</div>

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).

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/64fa2d12fc76a58ab26c578a5857fccc99e00a67.png)

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [October 19, 2022, 9:10am UTC](https://community.weweb.io/t/how-do-i-bind-the-transform-section/1312/2 "2022-10-19T09:10:00Z")

</div>

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

> **[transform - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)**
>
> The transform CSS property lets you rotate, scale, skew, or translate an element.
> It modifies the coordinate space of the CSS visual formatting model.

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.

---

<div class="post-metadata">

**Author:** ![sbkbdigital](https://avatars.discourse-cdn.com/v4/letter/s/a3d4f5/32.png) [@sbkbdigital](https://community.weweb.io/u/sbkbdigital)\
**Post date:** [October 19, 2022, 11:26am UTC](https://community.weweb.io/t/how-do-i-bind-the-transform-section/1312/3 "2022-10-19T11:26:42Z")

</div>

> [@aurelie](#):
>
> `if(isOpen, "scaleY(1)", "scaleY(0)")`

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:**

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/c6fcad107f7501bae3477868667b49ecb774e078.png)

**After:**

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/984a35597f7a93719983059ed682215cbfdcdeb0.png)

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [October 19, 2022, 11:42am UTC](https://community.weweb.io/t/how-do-i-bind-the-transform-section/1312/4 "2022-10-19T11:42:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sbkbdigital](https://avatars.discourse-cdn.com/v4/letter/s/a3d4f5/32.png) [@sbkbdigital](https://community.weweb.io/u/sbkbdigital)\
**Post date:** [October 19, 2022, 11:45am UTC](https://community.weweb.io/t/how-do-i-bind-the-transform-section/1312/5 "2022-10-19T11:45:19Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/ceee7e023fe120ad2fa7cb06b807af68b44d3cee.png)