Unity 5e animating UI with different resolutions

Hi all,

I’m using Unity’s new UI system to try to make a “Sliding menu”. So we have two menus with anchors on all four corners of the canvas (So that they will scale with different resolutions). We can put one menu within the canvas, and another directly beside the canvas to the right. So it looks like this:

Then we can make a simple animation to move the menus left and right based on the Animator/Animation keyframes system Unity offers. This all works great until we change the resolution from the reference. Now we have menus which have scaled correctly based on the new resolution, but now our menus are overlapping like this:
[ ]

because of the growing. The RectTransform positions are all the same, as are the anchors…

In addition to this unexpected overlapping, the animations don’t work correctly. Yes, they start in the wrong positions, but they also don’t move as far as they should because of the scaling of the canvas… (Animations have constant values, and do not change based on scale of the canvas… mine didn’t anyway)

My setup is:

My game will be locked in portrait mode, hence that reference resolution. Does anyone have advice for how to accomplish what Im trying to do? Perhaps not putting them next to each other and doing some kind of trickery or scripting. Of course I can bypass the animation altogether and work out how to scale the menus based on Screen.stuff… And then I can use scripts to “animate” (AKA just move) the menus manually based on a scaled distance. However, I feel like there should be an easier way to do this using the tools provided.

Edit 1: I realized one mistake… my reference resolution is backwards. Should be x = 1080 and Y = 1920. I did that, changed the UI Scale Mode to expand and I thought it was actually working correctly, but unfortunately there are still some strange things like starting positions changing So again, goals are: 1. Menus stay the same size as canvas 2. The animation looks the same at all resolutions (Simply moving from completely offscreen to completely onscreen). Thanks!

I tried something with the build-in functionality in Unity and it seems to work as expected, animating ui from offscreen left, to the center regardless of the resolution.

  1. In the first frame of the animation I set the object’s anchor to the left of the parent and place the object offscreen.
  2. Then in the last frame of the animation I set the object’s anchor to the center of the parent and place the object exactly where I want it to end up.