Hide/Show Animations not working as intended

Design help Animations & Interactions
1

Hey there!

I am working on adjustments to a site and I have hit a brain fart.

  1. On my mobile site, there is a search icon in the header and a interaction to hide/show. The first loop works fine, however when you try to re-open the search bar it does not respond.

I have reviewed similar topics and solutions, however I have not figured out a working solution.

Thank you for any help!!

Here is my public share link:

https://preview.webflow.com/preview/halfsaintclothing?utm_medium=preview_link&utm_source=designer&utm_content=halfsaintclothing&preview=f81ebadfa4192351f0ac33a43ad95a6a&workflow=preview

2

If you apply the 2nd Click interaction on the same search popup div instead of the search 5 div it works.
image

However, I’m not sure your intent is to have your layout shift from the search box visibility. I recommend you give your search popup position: absolute and a background-color or something similar to the below:

image
image392×674 25.9 KB

3

Thank you!

However, my end goal here is to have a separate close button, I was hoping the solution would work for both, however, it works if it’s on the same element, but when close has its own button it does not repeat.

4

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.