Tweening GUI position has different result for other devices

[Quwanterz]

Hello, first of all, thank you for taking the time to read. I appreciate it. So, let me explain what I’m trying to achieve.

1. What do you want to achieve? I am doing a GUI information shop in which if you click a GUI button, an information GUI will pop up and will display the stats. And instead of position it, I want to tween the GUI. The shop GUI and the info GUI will be far apart from each other (Look at the picture attached). To put it simply, it’s like in the simulator game and when you press a certain button in the shop, there will be GUI with the info of the specific item.

2. What is the issue? As the title says, for some reason even though I set the TweenPosition to prioritize in Scale, the position is different for smaller devices such as mobile.

3. What solutions have you tried so far? I did research on positioning GUI, but none of the research solved my problem.

If anyone could solve my problem, that would be great. Thank you!

--THIS IS THE CODE WHICH MAKES THE GUI FAR APART FROM EACH OTHER

InfoMainframeGUI:TweenPosition(UDim2.new(0.55,0,InfoMainframeGUI.Position.Y.Scale,0), "Out", "Linear", 0.25)
MainframeOutline:TweenPosition(UDim2.new(0.35,0,MainframeOutline.Position.Y.Scale,0), "Out", "Linear", 0.25)

On PC:

On a mobile device (resolution: 736 x 414, tested using studio)

[trytry1 (Dyno)]

Share the sizes of both of the guis

[Aldanium (segfault)]

Your sizes are most likely offset for the UI. Double check the sizing as well, they both contribute towards it.

I’d also recommend that you use TweenService as it’ll be better for you in the long run.

[Quwanterz]

Both of the GUi’s Size are on scale. Forgot to mention but they are separate screen GUIs. When a button is clicked, it will just clone the info GUI and set both the GUI’s position away from each other.

[TheCarbyneUniverse (Carbyne)]

This sounds like a problem with Anchor Points.

Check out my tutorial, it explains Anchor Points, if you don’t know already:

Tips for Positioning and Sizing UI Elements Easily and Efficiently

[Return] Hello developers, I am TheCarbyneUniverse and I really enjoy UI designing. So, today I am going to share my quick and easy techniques of positioning an sizing UIs with the community! Please keep in mind that this tutorial is mostly for beginners to UI, so the concepts covered in this are relatively basic. 1. Use Scale Instead of Offset For those of you who do not know, there are two types of information needed when sizing and positioning UIs: scale and offset. The latter sizes/posi…

Bit, from the looks if it, it looks like a sizing problem. Ate you using a UI Aspect Ratio Constraint for the frames?

[Quwanterz]

No, I did not use ARC in the shop and info GUI. I am currently testing with anchor points as you have suggested. I will update once I finish testing with anchor points.

[Quwanterz]

Also, another question, is it really needed to use ARC or only for certain circumstances?

[TheCarbyneUniverse (Carbyne)]

You use ARC when you’re using things like ImageLabels which can get stretched when you use scale for sizing. So, ARC will take one side of the size and will calculate the other side with the given ratio.

If you set the dominant axis to width, then the height will be scaled accordingly, meaning it can go offscreen. If you want it to stay in vertically, then use height as the dominant axis and scale the element to be 0.9 height or something. In that case, the width will be calculated and your GUIs won’t go offscreen vertically. You just have to play around with them a little bit.

I also explained ARC in my tutorial above.

[Quwanterz]

Seems like setting the anchor points works, thank you very much!