Tweening elements in a layout group

I have a HorizontalLayoutGroup to which I would like to add/remove content at run time. I can do this by just parenting the new content to the layout group, but this causes everything in the group to instantly snap to its new position, which is very jarring. I would like to smoothly animate the transition. So far, the only way I have found to accomplish this is:

- Create empty "container" objects as a layer of indirection between the layout group and my content. Parent each content object to its own container object, then parent the container objects to the layout group.

When adding a new object:

- Iterate over all children of the layout group. For each one, unparent the content from the container, leaving the world position intact (i.e. content.SetParent(null, true)).
- Add a new container to the layout group.
- Wait a frame so that the layout group has a chance to reposition all of the containers.
- Reparent each of the content objects to its respective container, again leaving world position intact (i.e. content.SetParent(container, true)).
- Tween the local position of the content from its current value to zero.

This seems to work, but it feels a bit clunky. Is there some easier way to do this that I'm missing? If not, it'd be really nice if there was a setting on layout groups to control the transition time to move the contents of their layout groups to their new position when you add or remove an element.

 

You can add LayoutElement script to the object you add and animate its preferredHeight.

 

Thanks for the suggestion, but I don't think that would solve the issue. Adding a child to a layout group will always cause any other children to instantly snap to their new position, and adjusting the width/height would not prevent the snap.

 

Sorry about the slow response. I'd been wanting to try this out before replying, but haven't had time in the last few days. Your example clearly shows that it works though, so I'm looking forward to giving it a shot. Thanks!

(When I read your solution the first time, I'd thought that you meant to tween the preferred width/height of the existing elements, not the new one. It makes a lot more sense now that I understand what you were suggesting)

 

This solution worked perfectly, thanks for sharing. I made a simple coroutine that is called when I activate or deactivate an element in my list, that animates the preferredHeight.