Question Make UI Prefab translate after instantiating

Hi.
I'm trying to do a VR chat interface for a project. Here is a simple view of my interface:


So I have a Canvas with a Vertical Layout Group, and some "message" prefabs. I use Instantiate() in scripts to add messages to the Canvas. It allows me to add messages at the bottom of the Canvas, and the Vertical Layout Group pushes the others up, no matter the size of the message (the message can have several lines). That's working as I expect.
My problem : when messages are instantiated, it pushes the others up without any animation. I would like messages above the last one to slowly translate to their final position instead of being teleported, just like you would expect in any messaging app.
Any ideas ?

 

Would making existing object instances lerp from current local position to new one?

https://docs.unity3d.com/ScriptReference/Vector2.Lerp.html

 

Thanks but I'm not sure how this would help me. The Vertical Group Layout moves my prefabs when I add one to the Layout Group. I'm not moving them, prefabs are moved BY the Layout Group. And it does it instantly, not slowly translating. That's what I'm looking for.

 

Manipulating UI via RectTransforms is very very tricky. Your best bet is to let the UI system do as much positioning as possible, and then just move your items to positions computed based on known empty anchors in the system.

You can look in the source code for how Vertical Layout Group manipulates the RectTransforms when it lays stuff out, and perhaps you could hack it up to have your own that scrolls, but I imagine that would be even harder.

If you're making that vertical layout, one option is to disable all auto-movement of the stack, then add the message at bottom, and do your own slide-it-up until it is fully within the viewable area.

It's gonna be fiddly and twitchy to get it all working properly. As you work, be sure you regularly change the shape and size of your screen, because that will also impact what you are doing, requiring you to use the root Canvas RectTransform as well as classes in RectTransformUtility to get it right.

Good luck!