Issues with animating an expanding menu

Hi there, this is my first question posted on the forums after finding a lot of help with other stuff on here! I am trying to create a menu that expands into the whole screen when clicked on. The menu expands from a specific shape, and the "rounded rectangle" portion of that shape grows into the full window. However, I seem to have trouble actually having the rectangle filling out the whole window. The rounded rectangle that expands is set to all of the pins and arrow options of the flexible layout menu section, yet doesn't fill out the window. I've attached a sample project file with the menu element and the expanding animation, I hope someone can advise on where i'm going wrong! (9.7 KB)

Hype animates absolute positions. The viewport/window-dimensions can be different.
so in fact there is no way to achieve exactly this behavior via the UI.

it could be scripted, but'll get somehow laborious cause resizing, orientationchange ... and i'd suspect some more elements will get involved ...

One approach to keep things hypestyle would be to simply open this menu in its own scene.

1 Like

What about something like this: (15.5 KB)

The main point I think you are missing is that flexible layout channels from parent to child - so if your top level symbol doesn't flexibly resize then the children will not change.

In this document's case I preserved margin pins which does lead to an effect where the box is small (0 width/height) for quite a while in the growth animation if you have a small window. If you turn off the top/left/width/height pins then it will be proportionally positioned and animate better. There might be a combination of grouping you can do that allows it to grow correctly in both circumstances.

1 Like