diff --git a/src/components/UI.ts b/src/components/UI.ts
index 07903b9..b7aa9e3 100644
--- a/src/components/UI.ts
+++ b/src/components/UI.ts
@@ -1,11 +1,14 @@
 import { FormatProperties } from "../compilers/FormatProperties.js"
 import { Memory } from "../compilers/Memory.js"
+import { AnimType } from "../types/enums/AnimType.js"
 import { ArrayName } from "../types/enums/ArrayName.js"
 import { Operation } from "../types/enums/Operation.js"
 import { Renderer } from "../types/enums/Renderer.js"
 import { Type } from "../types/enums/Type.js"
 import { Properties } from "../types/properties/components.js"
 import { BindingItem, ButtonMapping, ModificationItem, VariableItem, Variables } from "../types/properties/value.js"
+import { Animation } from "./Animation.js"
+import { AnimationKeyframe } from "./AnimationKeyframe.js"
 import { Class } from "./Class.js"
 import { ExtendsOf, RandomString, ResolveBinding } from "./Utils.js"
 
@@ -23,6 +26,7 @@ export class UI<T extends Type, K extends Renderer | null = null> extends Class
 	protected readonly bindings: BindingItem[] = []
 	protected readonly variables: VariableItem[] = []
 	protected readonly buttonMappings: ButtonMapping[] = []
+	protected readonly anims: (Animation<AnimType> | AnimationKeyframe<AnimType>)[] = []
 	protected readonly extendType?: Type
 
 	protected properties: Properties<T, K> = <any>{}
@@ -115,6 +119,11 @@ export class UI<T extends Type, K extends Renderer | null = null> extends Class
 		return this
 	}
 
+	addAnimations(...anims: (Animation<AnimType> | AnimationKeyframe<AnimType>)[]) {
+		this.anims.push(...anims)
+		return this
+	}
+
 	/**
 	 * Return a extend of this element
 	 * @param properties
@@ -141,6 +150,8 @@ export class UI<T extends Type, K extends Renderer | null = null> extends Class
 		if (this.variables.length) obj.variables = this.variables
 		if (this.buttonMappings.length) obj.button_mappings = this.buttonMappings
 
+		if (this.anims.length) obj.anims = this.anims.map(a => String(a))
+
 		if (this.controls.size) {
 			obj.controls = []
 			this.controls.forEach((e, key) => obj.controls.push({ [key + e[0]]: e[1] }))
diff --git a/test/app.ts b/test/app.ts
index 0cd1597..718af48 100644
--- a/test/app.ts
+++ b/test/app.ts
@@ -1,4 +1,4 @@
-import { AnimationSize } from ".."
+import { Anchor, AnimationSize, Easing, KeyframeSize, Panel } from ".."
 
 const animation = AnimationSize(
 	"smooth_loop",
@@ -19,4 +19,16 @@ const animation = AnimationSize(
 	},
 ).setLoop(true)
 
-console.log(animation)
+const panel = Panel({
+	anchor: Anchor.BOTTOM_LEFT,
+}).addAnimations(
+	animation,
+	KeyframeSize({
+		from: [10, 10],
+		to: [20, 20],
+		duration: 0.3,
+		easing: Easing.LINEAR,
+	}),
+)
+
+console.log(String(panel))