Mouse-tap Trigger Sets Element to over 2000% width

Design help Animations & Interactions
1

I have an interaction for my search bar, when you click the icon it will fade in the search box. I slowed it down so its easier to see the issue, but the width is somehow being set to like 2000% width, and animates to 100%. No clue how this issue happened in the first place

Here is my public share link: https://preview.webflow.com/preview/game-fuel-informer?utm_medium=preview_link&utm_source=dashboard&utm_content=game-fuel-informer&preview=83d0f7a3f4aac54f6f3a2b07f447a527&mode=preview

Here is my website: https://game-fuel-informer.webflow.io/category/recipes

2

@garrettj1994 can you fix your read-only link? Thanks

3

Updated read-only url.

Here is a GIF of the dev tools slowed down: Screen capture - 5c836203aeedcd5fc0a82723b90c85d5 - Gyazo

4

Ok. It’s only the first time. After clicking once, there is no issue. Hm. Maybe it’s better to use
“scale” than “size”. Then you don’t have to size the “width”.

5

I remade it so its a simple show/hide and opacity animation. Again, on first click it doesn’t work correctly. Why is my site cursed?