Roll-down search box

Hi, Jacob. After looking at your component, it seems like you’re using the Change to which only have the 3 basic transitions. If you want it to roll down like a drop down you have to separate the search box and open it as overlay and add the move in transition.

Here is how to do it:

1. Create a Search Button component and a drop down search box component, or just separate your component into two parts.
   

   

2. Add a Click event on the search button with open overlay using these conditions.
   

   

3. Manually adjust the overlay below the search button according to your design.
   

   

4. Inside your dropdown search box component and on the close button, add a click event on it with close overlay.
   

After doing that, the dropdown menu should work like this:

Thanks so much Raphael! I had no idea the other transitions were available, this opens up so many possibilities and actually gives me a cleaner way to handle some components I’ve already created. I’ve got the roll-down and roll-up working as per your instructions (this is so much nicer). A couple of things I’m still trying to figure out:

1. The drop-down starts at the top of the btn_search component and overlays the icon itself during the transition. I see your example is very cleanly happening behind/underneath the search component/icon.
2. How does this work for packaging it up and using it on a different page? I can’t seem to get it to work on another page.
   I’m still working in the same link as before.

Hi, Jacob. Just copy and paste the search button to any of your frames.
.
Since the overlay is connected to the button component, no matter which frames you put it, it will work.

Thanks for responding! I think maybe I didn’t articulate the first questions well, here is an illustration of what I mean. Is it possible to set the starting position for the “move in” animation? You somehow accomplished this in your original example.

Hi, Jacob.

Sorry for misunderstanding your question. You will need to manually adjust it on the overlay settings.

Cons: If you put the search button in a different layout, there might be issues with the layout. If that happens, you will have to do the prototypes on the search button instances and not on the component.

Hi there, I have to admit I am stuck in exactly the same place that @Jacob22 was regarding how can you control where the overlay STARTS. I don’t see anywhere that one can specify that. I understand positioning the overlay where you want it to end up. My case is pretty much exactly like Jacob’s. I want a dropdown to slide down from a header. Right now, it slides from down from the top of the frame, like it looks in the overlay palette animation.

How do you do this!? It is driving me crazy.

Thanks!

Hi, Arnie.

I’m not entirely sure if you can control the starting position on the move in.

What I suggest is instead of doing a move in, just do a smart animate.

check this file:
Test File - arnie.fig (25.2 KB)

Hi Raphael, I appreciate the response. Are you sure I have to use smart animate? It seems that you got it to work in your sample above, and when I click on Jacob’s link in the original post, the dropdown function works in the manner I’d like.

I thought you wanted to control the initial position of the sub menu. 😅

This is how I did it: