Figma Support Forum

Smart animating componant expanding from the bottom

Hi, I am trying to prototype a navigation bar for my app. The toolbar is anchored at the bottom, and I would like my menu to expand from the bottom to the top when tapped.

I made two states for my component and set the transition to smart animate. All the layers animate correctly, except for the fact that the “origin” of the animation is not the right one. everything expands from the top left, putting all of my content out of the frame, instead of expanding from the bottom right. I tried to set the constraints of my frames to bottom right and to fix the position when scrolling, but it did not change anything.

I found kind of a workaround by making the frame of the open state component the same size as the frame of the closed state component but it’s not optimal. Is there no way of telling Figma how to extrapolate the animation?

I couldn’t find any tutorial or topic adressing this issue so if someone could help me here I would appreciate :grinning_face_with_smiling_eyes:

Hey @Gwen2, I made a small example for you where everything works as expected. You can duplicate it and study it.

Design file:

Prototype:

Thanks a lot! I’ll look into your exemple :smiley: