├── Assets ├── Row.prefab ├── Test.unity ├── ChatWindow.unity ├── Animations │ ├── Row.controller │ ├── RowBuildIn.anim │ ├── SlideRowsIn_Down.anim │ ├── SlideRowsIn_Right.anim │ ├── ChatMessageBuildIn.anim │ ├── AnimatedBoxController.controller │ ├── ChatMessageController.controller │ ├── Row.controller.meta │ ├── RowBuildIn.anim.meta │ ├── ChatMessageBuildIn.anim.meta │ ├── SlideRowsIn_Down.anim.meta │ ├── SlideRowsIn_Right.anim.meta │ ├── AnimatedBoxController.controller.meta │ └── ChatMessageController.controller.meta ├── Test.unity.meta ├── ChatWindow.unity.meta ├── Row.prefab.meta ├── Scripts.meta ├── Animations.meta └── Scripts │ ├── Editor.meta │ ├── Spawner.cs.meta │ ├── AnimatableLayoutElement.cs.meta │ ├── AnimatableHorizontalLayoutGroup.cs.meta │ ├── AnimatableVerticalLayoutGroup.cs.meta │ ├── Editor │ ├── AnimatableLayoutElementEditor.cs.meta │ └── AnimatableLayoutElementEditor.cs │ ├── Spawner.cs │ ├── AnimatableLayoutElement.cs │ ├── AnimatableVerticalLayoutGroup.cs │ └── AnimatableHorizontalLayoutGroup.cs ├── ProjectSettings ├── ProjectVersion.txt ├── TagManager.asset ├── AudioManager.asset ├── InputManager.asset ├── NavMeshAreas.asset ├── TimeManager.asset ├── DynamicsManager.asset ├── EditorSettings.asset ├── NetworkManager.asset ├── ProjectSettings.asset ├── QualitySettings.asset ├── GraphicsSettings.asset ├── Physics2DSettings.asset ├── UnityAdsSettings.asset ├── EditorBuildSettings.asset └── UnityAnalyticsManager.asset ├── .gitignore └── README.md /Assets/Row.prefab: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/Assets/Row.prefab -------------------------------------------------------------------------------- /Assets/Test.unity: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/Assets/Test.unity -------------------------------------------------------------------------------- /ProjectSettings/ProjectVersion.txt: -------------------------------------------------------------------------------- 1 | m_EditorVersion: 5.2.2f1 2 | m_StandardAssetsVersion: 0 3 | -------------------------------------------------------------------------------- /Assets/ChatWindow.unity: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/Assets/ChatWindow.unity -------------------------------------------------------------------------------- /Assets/Animations/Row.controller: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/Assets/Animations/Row.controller -------------------------------------------------------------------------------- /ProjectSettings/TagManager.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/ProjectSettings/TagManager.asset -------------------------------------------------------------------------------- /Assets/Animations/RowBuildIn.anim: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/Assets/Animations/RowBuildIn.anim -------------------------------------------------------------------------------- /ProjectSettings/AudioManager.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/ProjectSettings/AudioManager.asset -------------------------------------------------------------------------------- /ProjectSettings/InputManager.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/ProjectSettings/InputManager.asset -------------------------------------------------------------------------------- /ProjectSettings/NavMeshAreas.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/ProjectSettings/NavMeshAreas.asset -------------------------------------------------------------------------------- /ProjectSettings/TimeManager.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/ProjectSettings/TimeManager.asset -------------------------------------------------------------------------------- /ProjectSettings/DynamicsManager.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/ProjectSettings/DynamicsManager.asset -------------------------------------------------------------------------------- /ProjectSettings/EditorSettings.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/ProjectSettings/EditorSettings.asset -------------------------------------------------------------------------------- /ProjectSettings/NetworkManager.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/ProjectSettings/NetworkManager.asset -------------------------------------------------------------------------------- /ProjectSettings/ProjectSettings.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/ProjectSettings/ProjectSettings.asset -------------------------------------------------------------------------------- /ProjectSettings/QualitySettings.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/ProjectSettings/QualitySettings.asset -------------------------------------------------------------------------------- /Assets/Animations/SlideRowsIn_Down.anim: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/Assets/Animations/SlideRowsIn_Down.anim -------------------------------------------------------------------------------- /Assets/Animations/SlideRowsIn_Right.anim: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/Assets/Animations/SlideRowsIn_Right.anim -------------------------------------------------------------------------------- /ProjectSettings/GraphicsSettings.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/ProjectSettings/GraphicsSettings.asset -------------------------------------------------------------------------------- /ProjectSettings/Physics2DSettings.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/ProjectSettings/Physics2DSettings.asset -------------------------------------------------------------------------------- /ProjectSettings/UnityAdsSettings.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/ProjectSettings/UnityAdsSettings.asset -------------------------------------------------------------------------------- /Assets/Animations/ChatMessageBuildIn.anim: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/Assets/Animations/ChatMessageBuildIn.anim -------------------------------------------------------------------------------- /ProjectSettings/EditorBuildSettings.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/ProjectSettings/EditorBuildSettings.asset -------------------------------------------------------------------------------- /ProjectSettings/UnityAnalyticsManager.asset: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/ProjectSettings/UnityAnalyticsManager.asset -------------------------------------------------------------------------------- /Assets/Animations/AnimatedBoxController.controller: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/Assets/Animations/AnimatedBoxController.controller -------------------------------------------------------------------------------- /Assets/Animations/ChatMessageController.controller: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmunro/AnimatedUnityLayouts/HEAD/Assets/Animations/ChatMessageController.controller -------------------------------------------------------------------------------- /Assets/Test.unity.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: 4e3a2dcacf0cf406d8585ffe829cec38 3 | timeCreated: 1447136546 4 | licenseType: Free 5 | DefaultImporter: 6 | userData: 7 | assetBundleName: 8 | assetBundleVariant: 9 | -------------------------------------------------------------------------------- /Assets/ChatWindow.unity.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: 7611bc3e441aa4f5e88a358197fdc01f 3 | timeCreated: 1447638935 4 | licenseType: Free 5 | DefaultImporter: 6 | userData: 7 | assetBundleName: 8 | assetBundleVariant: 9 | -------------------------------------------------------------------------------- /Assets/Row.prefab.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: 10146ab25f823452499f7629b9a05f0a 3 | timeCreated: 1447622310 4 | licenseType: Free 5 | NativeFormatImporter: 6 | userData: 7 | assetBundleName: 8 | assetBundleVariant: 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.csproj 2 | *.pidb 3 | *.unityproj 4 | *.sln 5 | *.userprefs 6 | Temp 7 | /Library 8 | /obj 9 | *.apk 10 | tags 11 | Assembly-CSharp-vs.csproj.FilesWrittenAbsolute.txt 12 | BetterEditorPrefs.asset 13 | launch.json 14 | /obj 15 | -------------------------------------------------------------------------------- /Assets/Animations/Row.controller.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: 9b6138bfd99094497b929eabf838f9fb 3 | timeCreated: 1447631150 4 | licenseType: Free 5 | NativeFormatImporter: 6 | userData: 7 | assetBundleName: 8 | assetBundleVariant: 9 | -------------------------------------------------------------------------------- /Assets/Animations/RowBuildIn.anim.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: 93d7e0486b854405a850ce876636eb19 3 | timeCreated: 1447631150 4 | licenseType: Free 5 | NativeFormatImporter: 6 | userData: 7 | assetBundleName: 8 | assetBundleVariant: 9 | -------------------------------------------------------------------------------- /Assets/Animations/ChatMessageBuildIn.anim.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: 1434fb1ae64944dee8778a8c8f3befef 3 | timeCreated: 1447662441 4 | licenseType: Free 5 | NativeFormatImporter: 6 | userData: 7 | assetBundleName: 8 | assetBundleVariant: 9 | -------------------------------------------------------------------------------- /Assets/Animations/SlideRowsIn_Down.anim.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: db0bfd12b87524eaa8c879e0b55e4136 3 | timeCreated: 1447616133 4 | licenseType: Free 5 | NativeFormatImporter: 6 | userData: 7 | assetBundleName: 8 | assetBundleVariant: 9 | -------------------------------------------------------------------------------- /Assets/Animations/SlideRowsIn_Right.anim.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: 1a978c08374e24abc9b04ba7f13e159e 3 | timeCreated: 1447627494 4 | licenseType: Free 5 | NativeFormatImporter: 6 | userData: 7 | assetBundleName: 8 | assetBundleVariant: 9 | -------------------------------------------------------------------------------- /Assets/Scripts.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: 4cd725371319e4fbda3db37a24ac7d1b 3 | folderAsset: yes 4 | timeCreated: 1447633470 5 | licenseType: Free 6 | DefaultImporter: 7 | userData: 8 | assetBundleName: 9 | assetBundleVariant: 10 | -------------------------------------------------------------------------------- /Assets/Animations.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: cb8561d45cfdf47899653981fb81fe97 3 | folderAsset: yes 4 | timeCreated: 1447633487 5 | licenseType: Free 6 | DefaultImporter: 7 | userData: 8 | assetBundleName: 9 | assetBundleVariant: 10 | -------------------------------------------------------------------------------- /Assets/Animations/AnimatedBoxController.controller.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: b81980e957e1345d3be502ee06058445 3 | timeCreated: 1447538056 4 | licenseType: Free 5 | NativeFormatImporter: 6 | userData: 7 | assetBundleName: 8 | assetBundleVariant: 9 | -------------------------------------------------------------------------------- /Assets/Animations/ChatMessageController.controller.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: c305f74570ed645e5b48a7e5f7a22605 3 | timeCreated: 1447662442 4 | licenseType: Free 5 | NativeFormatImporter: 6 | userData: 7 | assetBundleName: 8 | assetBundleVariant: 9 | -------------------------------------------------------------------------------- /Assets/Scripts/Editor.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: d19470f3092104e0f82d6c4a8e16f379 3 | folderAsset: yes 4 | timeCreated: 1447633502 5 | licenseType: Free 6 | DefaultImporter: 7 | userData: 8 | assetBundleName: 9 | assetBundleVariant: 10 | -------------------------------------------------------------------------------- /Assets/Scripts/Spawner.cs.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: 96e391a89a28b45c78c5fd5f5d8e2f8a 3 | timeCreated: 1447618490 4 | licenseType: Free 5 | MonoImporter: 6 | serializedVersion: 2 7 | defaultReferences: [] 8 | executionOrder: 0 9 | icon: {instanceID: 0} 10 | userData: 11 | assetBundleName: 12 | assetBundleVariant: 13 | -------------------------------------------------------------------------------- /Assets/Scripts/AnimatableLayoutElement.cs.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: 9cc02c97679d6417f8387be48efb07c5 3 | timeCreated: 1447533949 4 | licenseType: Free 5 | MonoImporter: 6 | serializedVersion: 2 7 | defaultReferences: [] 8 | executionOrder: 0 9 | icon: {instanceID: 0} 10 | userData: 11 | assetBundleName: 12 | assetBundleVariant: 13 | -------------------------------------------------------------------------------- /Assets/Scripts/AnimatableHorizontalLayoutGroup.cs.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: 0483836490ff44aeeaa08ac85fd23daf 3 | timeCreated: 1447627403 4 | licenseType: Free 5 | MonoImporter: 6 | serializedVersion: 2 7 | defaultReferences: [] 8 | executionOrder: 0 9 | icon: {instanceID: 0} 10 | userData: 11 | assetBundleName: 12 | assetBundleVariant: 13 | -------------------------------------------------------------------------------- /Assets/Scripts/AnimatableVerticalLayoutGroup.cs.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: 556a7c4d00aa54c77b3e6884c822f44a 3 | timeCreated: 1447539858 4 | licenseType: Free 5 | MonoImporter: 6 | serializedVersion: 2 7 | defaultReferences: [] 8 | executionOrder: 0 9 | icon: {instanceID: 0} 10 | userData: 11 | assetBundleName: 12 | assetBundleVariant: 13 | -------------------------------------------------------------------------------- /Assets/Scripts/Editor/AnimatableLayoutElementEditor.cs.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: 9c67c434edbff408f952f786fd3e4b86 3 | timeCreated: 1447633514 4 | licenseType: Free 5 | MonoImporter: 6 | serializedVersion: 2 7 | defaultReferences: [] 8 | executionOrder: 0 9 | icon: {instanceID: 0} 10 | userData: 11 | assetBundleName: 12 | assetBundleVariant: 13 | -------------------------------------------------------------------------------- /Assets/Scripts/Spawner.cs: -------------------------------------------------------------------------------- 1 | using UnityEngine; 2 | using System.Collections; 3 | using UnityEngine.UI; 4 | 5 | public class Spawner : MonoBehaviour 6 | { 7 | public RectTransform childHolder; 8 | public RectTransform childPrefab; 9 | 10 | void OnEnable () 11 | { 12 | for(var i = childHolder.childCount - 1; i >= 0; i--) 13 | { 14 | Destroy(childHolder.GetChild(i).gameObject); 15 | } 16 | 17 | var newChildren = Random.Range(2, 6); 18 | for(var i = 0; i < newChildren; i++) 19 | { 20 | var child = GameObject.Instantiate(childPrefab) as RectTransform; 21 | child.SetParent(childHolder, false); 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Assets/Scripts/Editor/AnimatableLayoutElementEditor.cs: -------------------------------------------------------------------------------- 1 | using UnityEngine; 2 | using UnityEngine.UI; 3 | using UnityEditor.AnimatedValues; 4 | 5 | using UnityEditor; 6 | 7 | [CustomEditor(typeof(AnimatableLayoutElement), true)] 8 | [CanEditMultipleObjects] 9 | public class AnimatableLayoutElementEditor : UnityEditor.UI.LayoutElementEditor 10 | { 11 | SerializedProperty m_PercentagePreferredWidth; 12 | SerializedProperty m_PercentagePreferredHeight; 13 | 14 | protected override void OnEnable() 15 | { 16 | m_PercentagePreferredWidth = serializedObject.FindProperty("m_PercentagePreferredWidth"); 17 | m_PercentagePreferredHeight = serializedObject.FindProperty("m_PercentagePreferredHeight"); 18 | 19 | base.OnEnable(); 20 | } 21 | 22 | public override void OnInspectorGUI() 23 | { 24 | serializedObject.Update(); 25 | 26 | EditorGUILayout.PropertyField(m_PercentagePreferredWidth); 27 | EditorGUILayout.PropertyField(m_PercentagePreferredHeight); 28 | serializedObject.ApplyModifiedProperties(); 29 | base.OnInspectorGUI(); 30 | } 31 | 32 | } 33 | -------------------------------------------------------------------------------- /Assets/Scripts/AnimatableLayoutElement.cs: -------------------------------------------------------------------------------- 1 | using UnityEngine.EventSystems; 2 | using UnityEngine.UI; 3 | using UnityEngine; 4 | 5 | [RequireComponent(typeof(RectTransform))] 6 | [ExecuteInEditMode] 7 | public class AnimatableLayoutElement : LayoutElement 8 | { 9 | [SerializeField] private float m_PercentagePreferredHeight = 0.5f; 10 | [SerializeField] private float m_PercentagePreferredWidth = 0.5f; 11 | 12 | private LayoutGroup m_Group; 13 | protected LayoutGroup layoutGroup 14 | { 15 | get 16 | { 17 | if (m_Group == null) 18 | m_Group = GetComponent(); 19 | return m_Group; 20 | } 21 | } 22 | 23 | public override float preferredHeight { get { return layoutGroup.preferredHeight * m_PercentagePreferredHeight; } } 24 | public override float preferredWidth { get { return layoutGroup.preferredWidth * m_PercentagePreferredWidth; } } 25 | public override float minHeight { get { return layoutGroup.minHeight * m_PercentagePreferredHeight; } } 26 | public override float minWidth { get { return layoutGroup.minWidth * m_PercentagePreferredWidth; } } 27 | public override float flexibleWidth { get { return layoutGroup.flexibleWidth * m_PercentagePreferredWidth; } } 28 | 29 | public override int layoutPriority { get { return 100; } } 30 | } 31 | -------------------------------------------------------------------------------- /Assets/Scripts/AnimatableVerticalLayoutGroup.cs: -------------------------------------------------------------------------------- 1 | using UnityEngine.EventSystems; 2 | using UnityEngine.UI; 3 | using UnityEngine; 4 | using System.Collections; 5 | 6 | [RequireComponent(typeof(RectTransform))] 7 | [ExecuteInEditMode] 8 | public class AnimatableVerticalLayoutGroup : VerticalLayoutGroup 9 | { 10 | public bool active = true; 11 | 12 | public override void SetLayoutHorizontal() 13 | { 14 | if(!active) 15 | return; 16 | SetChildrenAlongAxis(0, true); 17 | } 18 | 19 | public override void SetLayoutVertical() 20 | { 21 | if(!active) 22 | return; 23 | SetChildrenAlongAxis(1, true); 24 | } 25 | 26 | protected override void OnEnable() 27 | { 28 | StartCoroutine(CalculateLayout()); 29 | } 30 | IEnumerator CalculateLayout() 31 | { 32 | yield return new WaitForEndOfFrame(); 33 | 34 | var rectTransform = (RectTransform)transform; 35 | 36 | rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, preferredHeight); 37 | 38 | CalculateLayoutInputVertical(); 39 | CalculateLayoutInputHorizontal(); 40 | SetChildrenAlongAxis(0, true); 41 | SetChildrenAlongAxis(1, true); 42 | 43 | rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, 0); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /Assets/Scripts/AnimatableHorizontalLayoutGroup.cs: -------------------------------------------------------------------------------- 1 | using UnityEngine.EventSystems; 2 | using UnityEngine.UI; 3 | using UnityEngine; 4 | using System.Collections; 5 | 6 | [RequireComponent(typeof(RectTransform))] 7 | [ExecuteInEditMode] 8 | public class AnimatableHorizontalLayoutGroup : HorizontalLayoutGroup 9 | { 10 | [SerializeField] 11 | protected bool _active = true; 12 | 13 | public override void SetLayoutHorizontal() 14 | { 15 | if(!_active) 16 | return; 17 | SetChildrenAlongAxis(0, false); 18 | } 19 | 20 | public override void SetLayoutVertical() 21 | { 22 | if(!_active) 23 | return; 24 | SetChildrenAlongAxis(1, false); 25 | } 26 | 27 | protected override void OnEnable() 28 | { 29 | StartCoroutine(CalculateLayout()); 30 | } 31 | IEnumerator CalculateLayout() 32 | { 33 | yield return new WaitForEndOfFrame(); 34 | 35 | var rectTransform = (RectTransform)transform; 36 | rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, preferredWidth); 37 | 38 | CalculateLayoutInputVertical(); 39 | CalculateLayoutInputHorizontal(); 40 | SetChildrenAlongAxis(0, false); 41 | SetChildrenAlongAxis(1, false); 42 | 43 | rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, 0); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Animating Unity UI auto-layouts 2 | This project exists to show some examples of how to animate Unity UI components when they are driven by the auto-layout system. Ordinarily, it's impossible to animate auto-layouts because their `RectTransforms` are constantly being overwritten by whichever `LayoutGroup` is driving them. This project demonstrates a way around that problem, and allows you to use regular Unity animation clips to animate slide-ins and fold-ins. 3 | 4 | ## Caveats 5 | Animating with the built-in Unity animation clip system will create tons of garbage keyframes if the auto-layout system is active while you're animating. I mostly animate with the objects I'm animating disabled so they don't trigger the auto-layout functions. 6 | 7 | I haven't been able to figure out how to create an effective two-dimensional slide-in, e.g. slide in from the top left. Unfortunately, it doesn't seem possible to tween the `Flexible` properties effectively, so you can't really use them. 8 | 9 | ## Goals 10 | Ultimately, I'd like to have as much layout flexibility as the CSS Box Model. The [Unity UI Extensions](https://bitbucket.org/ddreaper/unity-ui-extensions) project is a good place to look for some of that functionality. 11 | 12 | ## How to use 13 | Download this example project and take a look at how the components are put together in the included test scenes. 14 | 15 | ### Fold-in animations 16 | Animations where the object is being laid-out while animating (so that child objects are constantly updating position and size) are possible if you use the default `LayoutGroup` components while animating the new `AnimatableLayoutElement`. 17 | 18 | ### Slide-in animations 19 | Animations where the object is laid-out at "final" dimensions, and is then unmasked, are possible if you use the new `AnimatableLayout` components and disable their `active` field while animating. 20 | --------------------------------------------------------------------------------