From ae56cae5879b3062ac10f9bb9a6368fbacb5be13 Mon Sep 17 00:00:00 2001
From: Variable <77773850+Variable-ind@users.noreply.github.com>
Date: Sat, 1 Jul 2023 02:01:14 +0500
Subject: [PATCH] ImageEffect Animation 2.0 (#879)

* Better Animate System

* checkbutton to checkbox

* fixed value and saturation sliders being divided by 360 (when they should be divided by 100)

* minor code cleanup

* moved frame index code to ImageEffect.gd

* code cleanup

* more cleanup

* preview animation is now possible

* fixing things

* only hide when affect == FRAME

* formatting

* formatting

* formatting

* renamed Animate.png and a minor improvement

* removed unintentional changes
---
 assets/graphics/misc/animate.png              | Bin 0 -> 964 bytes
 assets/graphics/misc/animate.png.import       |  35 ++++
 project.godot                                 |   6 +
 src/Classes/ImageEffect.gd                    | 112 ++++++------
 .../ImageEffects/DesaturateDialog.tscn        |  56 ++----
 .../Dialogs/ImageEffects/DropShadowDialog.gd  |  21 +--
 .../ImageEffects/DropShadowDialog.tscn        |  57 +++---
 .../Dialogs/ImageEffects/FlipImageDialog.tscn |  54 +++---
 .../Dialogs/ImageEffects/GradientDialog.tscn  |  91 +++++-----
 .../ImageEffects/GradientMapDialog.tscn       |  29 ++-
 src/UI/Dialogs/ImageEffects/HSVDialog.gd      |  25 +--
 src/UI/Dialogs/ImageEffects/HSVDialog.tscn    |  41 +++--
 .../ImageEffects/ImageEffectParent.tscn       | 100 +++++------
 .../ImageEffects/InvertColorsDialog.tscn      |  56 ++----
 src/UI/Dialogs/ImageEffects/OutlineDialog.gd  |  13 +-
 .../Dialogs/ImageEffects/OutlineDialog.tscn   |  69 +++-----
 src/UI/Dialogs/ImageEffects/Posterize.tscn    |  53 +++---
 src/UI/Dialogs/ImageEffects/RotateImage.gd    |  22 +--
 src/UI/Dialogs/ImageEffects/RotateImage.tscn  | 145 +++++++--------
 src/UI/Nodes/AnimatePanel.gd                  | 165 ++++++++++++++++++
 src/UI/Nodes/AnimatePanel.tscn                | 156 +++++++++++++++++
 21 files changed, 781 insertions(+), 525 deletions(-)
 create mode 100644 assets/graphics/misc/animate.png
 create mode 100644 assets/graphics/misc/animate.png.import
 create mode 100644 src/UI/Nodes/AnimatePanel.gd
 create mode 100644 src/UI/Nodes/AnimatePanel.tscn

diff --git a/assets/graphics/misc/animate.png b/assets/graphics/misc/animate.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b0f2abb4630f23036f289f52484ef617d70864d
GIT binary patch
literal 964
zcmV;#13UbQP)<h;3K|Lk000e1NJLTq001ih001Wl1^@s6mY=b^00001b5ch_0Itp)
z=>Px&en~_@R9J=WSZzpCQ5b&C8f7X(l5@JkVWuUOQ4pyVmG;9d`q0c~AC^T_iV>Bj
zn9EeejHslrOiXd8^yQzRPx`bp3xc9aevC@DnNccP;kc(Cm1+0fV%~eFkPqy~-t)fC
zdCq&Dd(L(Vh9MG?_S1<PFR0Zjc&b(S-17yiS1u>Yp%&I3*KgdSep4p%;vF3y006Rz
z-MD!N_4b|wwTBA6leN%zdBWAz1u1D+s3<QYf97AVzKZ0%i98-RxA6b~g;+tG;&)M@
zv6(Xh5Fe*QM0gnd{e0o->H+|WTou90KV5K?eEihOiz^gAWb#(`Hze*(rlE`GL+zo0
zTCM7f8!9d#HDwQztEst}j#3Ql3CD5p@$q5iAI?5PH^i>t#nbh<zdIYbHjXAF?WZRS
z3hAn-4a{zJc6MP_;Pe4P0U#ngOmKm9b<cP)g+hU2$4@cmNKe~GY&IJ&uF-gcT)Tdg
z`uq6~7<lpW6_!PWGgn?)`-FOUxbxz9M+<Q3WInGZDkhHR=jwU+Jw0C#5HO87$G(&d
z>Nb8HTH7orIG)#+LyC$^Y1rZgyaKIO%OpCGmPxm7+sKPIHJcE+cp<aq&fWV|>pkgr
zZj%XSixul**V<)6WM=14lgY&U6rL>+d~l4$24>Al0s8<yY-X1*29&L>X6C@6g&~4P
zH*ep=vZYI4v9!ZtZO7Ypt!Qp}gDV%x1Uq%Hvc$eFGC%;pWHK>VU0h;7rao2lBvL^M
z0A1bPFq^G--Pi()wH;=Q73T_13>%Rn7(qY$^#L1B=<T(M{~_Z@{6AuQdu>Qb%Yx9w
zA~i&JwxYa<goFf<;t~VCe*GqeCP7GMgG_xYnL5><JgljcijoJ(JsYcwCURLrmIq8O
zYsh*U{IbTQ$Mur%IppYC7ZXKN59XlFY!SuduyfW>dWHlC%_HZ_DhF*1hhGXA>B)n(
z#*p1$9LL#R<M7u<2lY8r7ZV95r!jWdI!tU#>{gn%Gaed^=b$+pBDUO6MMHw;isq43
zte7olK^C!6Y&i=`0BC>T0hRj%NeHFdauyT-U~Fg<O_Z+Bp+;kaY(jybV#VCu(Yh`4
z{(~ACAE%Sdn?mS&k#X@-HJvj%P}a%BV89>7$ki)I{nO_|spp><)&EOXRmCA29j&L7
m!g;I{oSmJAN*50t$KgA2AX%LBWLk>=0000<MNUMnLSTYlvB5L|

literal 0
HcmV?d00001

diff --git a/assets/graphics/misc/animate.png.import b/assets/graphics/misc/animate.png.import
new file mode 100644
index 000000000..2d3817f74
--- /dev/null
+++ b/assets/graphics/misc/animate.png.import
@@ -0,0 +1,35 @@
+[remap]
+
+importer="texture"
+type="StreamTexture"
+path="res://.import/animate.png-79364ccdc41b6325d06915e85b554b1e.stex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://assets/graphics/misc/animate.png"
+dest_files=[ "res://.import/animate.png-79364ccdc41b6325d06915e85b554b1e.stex" ]
+
+[params]
+
+compress/mode=0
+compress/lossy_quality=0.7
+compress/hdr_mode=0
+compress/bptc_ldr=0
+compress/normal_map=0
+flags/repeat=0
+flags/filter=false
+flags/mipmaps=false
+flags/anisotropic=false
+flags/srgb=2
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/HDR_as_SRGB=false
+process/invert_color=false
+process/normal_map_invert_y=false
+stream=false
+size_limit=0
+detect_3d=false
+svg/scale=1.0
diff --git a/project.godot b/project.godot
index 0649d9782..c60dc0842 100644
--- a/project.godot
+++ b/project.godot
@@ -44,6 +44,11 @@ _global_script_classes=[ {
 "language": "GDScript",
 "path": "res://addons/aimg_io/frame.gd"
 }, {
+"base": "PanelContainer",
+"class": "AnimatePanel",
+"language": "GDScript",
+"path": "res://src/UI/Nodes/AnimatePanel.gd"
+}, {
 "base": "Reference",
 "class": "AnimationTag",
 "language": "GDScript",
@@ -272,6 +277,7 @@ _global_script_class_icons={
 "AImgIOBaseExporter": "",
 "AImgIOCRC32": "",
 "AImgIOFrame": "",
+"AnimatePanel": "",
 "AnimationTag": "",
 "BaseCel": "",
 "BaseLayer": "",
diff --git a/src/Classes/ImageEffect.gd b/src/Classes/ImageEffect.gd
index 6f465df82..78415c9ba 100644
--- a/src/Classes/ImageEffect.gd
+++ b/src/Classes/ImageEffect.gd
@@ -5,7 +5,7 @@ extends ConfirmationDialog
 
 enum { SELECTED_CELS, FRAME, ALL_FRAMES, ALL_PROJECTS }
 
-var affect: int = SELECTED_CELS
+var affect := SELECTED_CELS
 var selected_cels := Image.new()
 var current_frame := Image.new()
 var preview_image := Image.new()
@@ -13,13 +13,10 @@ var preview_texture := ImageTexture.new()
 var preview: TextureRect
 var selection_checkbox: CheckBox
 var affect_option_button: OptionButton
-var animate_options_container: Node
-var animate_menu: PopupMenu
-var initial_button: Button
-var animate_bool := []
-var initial_values: PoolRealArray = []
-var selected_idx: int = 0  # the current selected cel to apply animation to
+var animate_panel: AnimatePanel
+var commit_idx := -1  # the current frame, image effect is applied to
 var confirmed := false
+var _preview_idx := 0  # the current frame, being previewed
 
 
 func _ready() -> void:
@@ -39,32 +36,42 @@ func _ready() -> void:
 		selection_checkbox.connect("toggled", self, "_on_SelectionCheckBox_toggled")
 	if affect_option_button:
 		affect_option_button.connect("item_selected", self, "_on_AffectOptionButton_item_selected")
-	if animate_menu:
-		set_animate_menu(0)
-		animate_menu.connect("id_pressed", self, "_update_animate_flags")
-	if initial_button:
-		initial_button.connect("pressed", self, "set_initial_values")
+	if animate_panel:
+		$"%ShowAnimate".connect("pressed", self, "display_animate_dialog")
 
 
 func _about_to_show() -> void:
 	confirmed = false
 	Global.canvas.selection.transform_content_confirm()
-	var frame: Frame = Global.current_project.frames[Global.current_project.current_frame]
-	selected_cels.resize(Global.current_project.size.x, Global.current_project.size.y)
-	selected_cels.fill(Color(0, 0, 0, 0))
-	Export.blend_selected_cels(selected_cels, frame)
-	current_frame.resize(Global.current_project.size.x, Global.current_project.size.y)
-	current_frame.fill(Color(0, 0, 0, 0))
-	Export.blend_all_layers(current_frame, frame)
-	update_preview()
+	prepare_animator(Global.current_project)
+	set_and_update_preview_image(Global.current_project.current_frame)
 	update_transparent_background_size()
 
 
+# prepares "animate_panel.frames" according to affect
+func prepare_animator(project: Project) -> void:
+	var frames = []
+	if affect == SELECTED_CELS:
+		for fram_layer in project.selected_cels:
+			if not fram_layer[0] in frames:
+				frames.append(fram_layer[0])
+		frames.sort()  # To always start animating from left side of the timeline
+		animate_panel.frames = frames
+	elif affect == FRAME:
+		frames.append(project.current_frame)
+		animate_panel.frames = frames
+	elif (affect == ALL_FRAMES) or (affect == ALL_PROJECTS):
+		for i in project.frames.size():
+			frames.append(i)
+		animate_panel.frames = frames
+
+
 func _confirmed() -> void:
-	selected_idx = 0
 	confirmed = true
+	commit_idx = -1
 	var project: Project = Global.current_project
 	if affect == SELECTED_CELS:
+		prepare_animator(project)
 		var undo_data := _get_undo_data(project)
 		for cel_index in project.selected_cels:
 			if !project.layers[cel_index[1]].can_layer_get_drawn():
@@ -73,12 +80,15 @@ func _confirmed() -> void:
 			if not cel is PixelCel:
 				continue
 			var cel_image: Image = cel.image
+			commit_idx = cel_index[0]  # frame is cel_index[0] in this mode
 			commit_action(cel_image)
 		_commit_undo("Draw", undo_data, project)
 
 	elif affect == FRAME:
+		prepare_animator(project)
 		var undo_data := _get_undo_data(project)
 		var i := 0
+		commit_idx = project.current_frame
 		for cel in project.frames[project.current_frame].cels:
 			if not cel is PixelCel:
 				i += 1
@@ -89,9 +99,11 @@ func _confirmed() -> void:
 		_commit_undo("Draw", undo_data, project)
 
 	elif affect == ALL_FRAMES:
+		prepare_animator(project)
 		var undo_data := _get_undo_data(project)
 		for frame in project.frames:
 			var i := 0
+			commit_idx += 1  # frames are simply increasing by 1 in this mode
 			for cel in frame.cels:
 				if not cel is PixelCel:
 					i += 1
@@ -103,9 +115,13 @@ func _confirmed() -> void:
 
 	elif affect == ALL_PROJECTS:
 		for _project in Global.projects:
+			prepare_animator(_project)
+			commit_idx = -1
+
 			var undo_data := _get_undo_data(_project)
 			for frame in _project.frames:
 				var i := 0
+				commit_idx += 1  # frames are simply increasing by 1 in this mode
 				for cel in frame.cels:
 					if not cel is PixelCel:
 						i += 1
@@ -117,42 +133,23 @@ func _confirmed() -> void:
 
 
 func commit_action(_cel: Image, _project: Project = Global.current_project) -> void:
-	if confirmed and affect == SELECTED_CELS:
-		selected_idx += 1
+	pass
 
 
 func set_nodes() -> void:
 	preview = $VBoxContainer/AspectRatioContainer/Preview
 	selection_checkbox = $VBoxContainer/OptionsContainer/SelectionCheckBox
 	affect_option_button = $VBoxContainer/OptionsContainer/AffectOptionButton
-	animate_options_container = $VBoxContainer/AnimationOptions
-	animate_menu = $"%AnimateMenu".get_popup()
-	initial_button = $"%InitalButton"
+	animate_panel = $"%AnimatePanel"
+	animate_panel.image_effect_node = self
 
 
-func set_animate_menu(elements: int) -> void:
-	initial_values.resize(elements)
-	initial_values.fill(0)
-	animate_bool.resize(elements)
-	animate_bool.fill(false)
-
-
-func set_initial_values() -> void:
-	pass
-
-
-func get_animated_value(project: Project, final: float, property_idx: int) -> float:
-	if animate_bool[property_idx] == true and confirmed:
-		var first := initial_values[property_idx]
-		var interpolation := float(selected_idx) / project.selected_cels.size()
-		return lerp(first, final, interpolation)
-	else:
-		return final
-
-
-func _update_animate_flags(id: int) -> void:
-	animate_bool[id] = !animate_bool[id]
-	animate_menu.set_item_checked(id, animate_bool[id])
+func display_animate_dialog():
+	var animate_dialog: Popup = animate_panel.get_parent()
+	var pos = Vector2(rect_global_position.x + rect_size.x, rect_global_position.y)
+	var animate_dialog_rect := Rect2(pos, Vector2(animate_dialog.rect_size.x, rect_size.y))
+	animate_dialog.popup(animate_dialog_rect)
+	animate_panel.re_calibrate_preview_slider()
 
 
 func _commit_undo(action: String, undo_data: Dictionary, project: Project) -> void:
@@ -198,7 +195,21 @@ func _on_SelectionCheckBox_toggled(_button_pressed: bool) -> void:
 
 func _on_AffectOptionButton_item_selected(index: int) -> void:
 	affect = index
-	animate_options_container.visible = bool(affect == SELECTED_CELS)
+	$"%ShowAnimate".visible = bool(affect != FRAME and animate_panel.properties.size() != 0)
+	prepare_animator(Global.current_project)  # for use in preview
+	animate_panel.re_calibrate_preview_slider()
+	update_preview()
+
+
+func set_and_update_preview_image(frame_idx: int) -> void:
+	_preview_idx = frame_idx
+	var frame: Frame = Global.current_project.frames[frame_idx]
+	selected_cels.resize(Global.current_project.size.x, Global.current_project.size.y)
+	selected_cels.fill(Color(0, 0, 0, 0))
+	Export.blend_selected_cels(selected_cels, frame)
+	current_frame.resize(Global.current_project.size.x, Global.current_project.size.y)
+	current_frame.fill(Color(0, 0, 0, 0))
+	Export.blend_all_layers(current_frame, frame)
 	update_preview()
 
 
@@ -208,6 +219,7 @@ func update_preview() -> void:
 			preview_image.copy_from(selected_cels)
 		_:
 			preview_image.copy_from(current_frame)
+	commit_idx = _preview_idx
 	commit_action(preview_image)
 	preview_image.unlock()
 	preview_texture.create_from_image(preview_image, 0)
diff --git a/src/UI/Dialogs/ImageEffects/DesaturateDialog.tscn b/src/UI/Dialogs/ImageEffects/DesaturateDialog.tscn
index 395055842..bb67b90d7 100644
--- a/src/UI/Dialogs/ImageEffects/DesaturateDialog.tscn
+++ b/src/UI/Dialogs/ImageEffects/DesaturateDialog.tscn
@@ -7,21 +7,25 @@
 window_title = "Desaturation"
 script = ExtResource( 1 )
 
-[node name="AspectRatioContainer" parent="VBoxContainer" index="0"]
-margin_right = 278.0
+[node name="ShowAnimate" parent="VBoxContainer" index="0"]
+visible = false
+
+[node name="AspectRatioContainer" parent="VBoxContainer" index="1"]
+margin_bottom = 238.0
 
 [node name="Preview" parent="VBoxContainer/AspectRatioContainer" index="0"]
-margin_left = 39.0
-margin_right = 239.0
+margin_left = 73.0
+margin_right = 287.0
+margin_bottom = 214.0
 
-[node name="RGBAContainer" type="HBoxContainer" parent="VBoxContainer" index="1"]
-margin_top = 204.0
-margin_right = 278.0
-margin_bottom = 224.0
+[node name="RGBAContainer" type="HBoxContainer" parent="VBoxContainer" index="2"]
+margin_top = 242.0
+margin_right = 360.0
+margin_bottom = 262.0
 alignment = 1
 
 [node name="RButton" type="Button" parent="VBoxContainer/RGBAContainer" index="0"]
-margin_right = 66.0
+margin_right = 87.0
 margin_bottom = 20.0
 hint_tooltip = "Modify Red Channel"
 mouse_default_cursor_shape = 2
@@ -31,8 +35,8 @@ pressed = true
 text = "R"
 
 [node name="GButton" type="Button" parent="VBoxContainer/RGBAContainer" index="1"]
-margin_left = 70.0
-margin_right = 137.0
+margin_left = 91.0
+margin_right = 178.0
 margin_bottom = 20.0
 hint_tooltip = "Modify Green Channel"
 mouse_default_cursor_shape = 2
@@ -42,8 +46,8 @@ pressed = true
 text = "G"
 
 [node name="BButton" type="Button" parent="VBoxContainer/RGBAContainer" index="2"]
-margin_left = 141.0
-margin_right = 207.0
+margin_left = 182.0
+margin_right = 269.0
 margin_bottom = 20.0
 hint_tooltip = "Modify Blue Channel"
 mouse_default_cursor_shape = 2
@@ -53,8 +57,8 @@ pressed = true
 text = "B"
 
 [node name="AButton" type="Button" parent="VBoxContainer/RGBAContainer" index="3"]
-margin_left = 211.0
-margin_right = 278.0
+margin_left = 273.0
+margin_right = 360.0
 margin_bottom = 20.0
 hint_tooltip = "Modify Alpha Channel"
 mouse_default_cursor_shape = 2
@@ -62,31 +66,9 @@ size_flags_horizontal = 3
 toggle_mode = true
 text = "A"
 
-[node name="OptionsContainer" parent="VBoxContainer" index="2"]
-margin_top = 228.0
-margin_right = 278.0
-margin_bottom = 252.0
-
 [node name="AffectOptionButton" parent="VBoxContainer/OptionsContainer" index="1"]
-margin_right = 278.0
 items = [ "Selected cels", null, false, 0, null, "Current frame", null, false, 1, null, "All frames", null, false, 2, null, "All projects", null, false, 3, null ]
 
-[node name="AnimationOptions" parent="VBoxContainer" index="3"]
-visible = false
-margin_top = 256.0
-margin_right = 278.0
-margin_bottom = 290.0
-
-[node name="PanelContainer" parent="VBoxContainer/AnimationOptions" index="1"]
-margin_right = 157.0
-
-[node name="AnimateMenu" parent="VBoxContainer/AnimationOptions/PanelContainer" index="0"]
-margin_right = 88.0
-
-[node name="InitalButton" parent="VBoxContainer/AnimationOptions" index="2"]
-margin_left = 161.0
-margin_right = 278.0
-
 [connection signal="toggled" from="VBoxContainer/RGBAContainer/RButton" to="." method="_on_RButton_toggled"]
 [connection signal="toggled" from="VBoxContainer/RGBAContainer/GButton" to="." method="_on_GButton_toggled"]
 [connection signal="toggled" from="VBoxContainer/RGBAContainer/BButton" to="." method="_on_BButton_toggled"]
diff --git a/src/UI/Dialogs/ImageEffects/DropShadowDialog.gd b/src/UI/Dialogs/ImageEffects/DropShadowDialog.gd
index 66746baee..c61ec3878 100644
--- a/src/UI/Dialogs/ImageEffects/DropShadowDialog.gd
+++ b/src/UI/Dialogs/ImageEffects/DropShadowDialog.gd
@@ -15,23 +15,18 @@ func _ready() -> void:
 	sm.shader = shader
 	preview.set_material(sm)
 
-
-func set_animate_menu(_elements) -> void:
 	# set as in enum
-	animate_menu.add_check_item("Offset X", Animate.OFFSET_X)
-	animate_menu.add_check_item("Offset Y", Animate.OFFSET_Y)
-	.set_animate_menu(Animate.size())
-
-
-func set_initial_values() -> void:
-	initial_values[Animate.OFFSET_X] = offset.x
-	initial_values[Animate.OFFSET_Y] = offset.y
+	animate_panel.add_float_property(
+		"Offset X", $VBoxContainer/ShadowOptions/OffsetSliders.find_node("X")
+	)
+	animate_panel.add_float_property(
+		"Offset Y", $VBoxContainer/ShadowOptions/OffsetSliders.find_node("Y")
+	)
 
 
 func commit_action(cel: Image, project: Project = Global.current_project) -> void:
-	.commit_action(cel, project)
-	var offset_x = get_animated_value(project, offset.x, Animate.OFFSET_X)
-	var offset_y = get_animated_value(project, offset.y, Animate.OFFSET_Y)
+	var offset_x = animate_panel.get_animated_values(commit_idx, Animate.OFFSET_X)
+	var offset_y = animate_panel.get_animated_values(commit_idx, Animate.OFFSET_Y)
 	var selection_tex := ImageTexture.new()
 	if selection_checkbox.pressed and project.has_selection:
 		selection_tex.create_from_image(project.selection_map, 0)
diff --git a/src/UI/Dialogs/ImageEffects/DropShadowDialog.tscn b/src/UI/Dialogs/ImageEffects/DropShadowDialog.tscn
index 73e8cd910..824a1bc7d 100644
--- a/src/UI/Dialogs/ImageEffects/DropShadowDialog.tscn
+++ b/src/UI/Dialogs/ImageEffects/DropShadowDialog.tscn
@@ -5,23 +5,25 @@
 [ext_resource path="res://src/UI/Nodes/ValueSliderV2.tscn" type="PackedScene" id=3]
 
 [node name="DropShadowDialog" instance=ExtResource( 1 )]
+visible = false
 window_title = "Drop Shadow"
 script = ExtResource( 2 )
 
 [node name="VBoxContainer" parent="." index="3"]
 margin_bottom = 340.0
 
-[node name="AspectRatioContainer" parent="VBoxContainer" index="0"]
-margin_right = 278.0
+[node name="AspectRatioContainer" parent="VBoxContainer" index="1"]
+margin_bottom = 224.0
 
 [node name="Preview" parent="VBoxContainer/AspectRatioContainer" index="0"]
-margin_left = 39.0
-margin_right = 239.0
+margin_left = 80.0
+margin_right = 280.0
+margin_bottom = 200.0
 
-[node name="ShadowOptions" type="GridContainer" parent="VBoxContainer" index="1"]
-margin_top = 204.0
-margin_right = 278.0
-margin_bottom = 280.0
+[node name="ShadowOptions" type="GridContainer" parent="VBoxContainer" index="2"]
+margin_top = 228.0
+margin_right = 360.0
+margin_bottom = 304.0
 custom_constants/vseparation = 4
 custom_constants/hseparation = 4
 columns = 2
@@ -31,14 +33,14 @@ __meta__ = {
 
 [node name="Label" type="Label" parent="VBoxContainer/ShadowOptions" index="0"]
 margin_top = 19.0
-margin_right = 137.0
+margin_right = 178.0
 margin_bottom = 33.0
 size_flags_horizontal = 3
 text = "Offset:"
 
 [node name="OffsetSliders" parent="VBoxContainer/ShadowOptions" index="1" instance=ExtResource( 3 )]
-margin_left = 141.0
-margin_right = 278.0
+margin_left = 182.0
+margin_right = 360.0
 value = Vector2( 5, 5 )
 min_value = Vector2( -64, -64 )
 max_value = Vector2( 64, 64 )
@@ -50,43 +52,26 @@ suffix_y = "px"
 
 [node name="ShadowColorLabel" type="Label" parent="VBoxContainer/ShadowOptions" index="2"]
 margin_top = 59.0
-margin_right = 137.0
+margin_right = 178.0
 margin_bottom = 73.0
 size_flags_horizontal = 3
 text = "Shadow color:"
 
 [node name="ShadowColor" type="ColorPickerButton" parent="VBoxContainer/ShadowOptions" index="3"]
-margin_left = 141.0
+margin_left = 182.0
 margin_top = 56.0
-margin_right = 278.0
+margin_right = 360.0
 margin_bottom = 76.0
 rect_min_size = Vector2( 64, 20 )
 size_flags_horizontal = 3
 color = Color( 0.0823529, 0.0823529, 0.0823529, 0.627451 )
 
-[node name="OptionsContainer" parent="VBoxContainer" index="2"]
-margin_top = 284.0
-margin_right = 278.0
-margin_bottom = 308.0
+[node name="OptionsContainer" parent="VBoxContainer" index="3"]
+margin_top = 308.0
+margin_bottom = 332.0
 
-[node name="AffectOptionButton" parent="VBoxContainer/OptionsContainer" index="1"]
-margin_right = 278.0
-items = [ "Selected cels", null, false, 0, null, "Current frame", null, false, 1, null, "All frames", null, false, 2, null, "All projects", null, false, 3, null ]
-
-[node name="AnimationOptions" parent="VBoxContainer" index="3"]
-margin_top = 312.0
-margin_right = 278.0
-margin_bottom = 346.0
-
-[node name="PanelContainer" parent="VBoxContainer/AnimationOptions" index="1"]
-margin_right = 157.0
-
-[node name="AnimateMenu" parent="VBoxContainer/AnimationOptions/PanelContainer" index="0"]
-margin_right = 88.0
-
-[node name="InitalButton" parent="VBoxContainer/AnimationOptions" index="2"]
-margin_left = 161.0
-margin_right = 278.0
+[node name="AnimateDialog" parent="." index="4"]
+margin_bottom = 340.0
 
 [connection signal="value_changed" from="VBoxContainer/ShadowOptions/OffsetSliders" to="." method="_on_OffsetSliders_value_changed"]
 [connection signal="color_changed" from="VBoxContainer/ShadowOptions/ShadowColor" to="." method="_on_ShadowColor_color_changed"]
diff --git a/src/UI/Dialogs/ImageEffects/FlipImageDialog.tscn b/src/UI/Dialogs/ImageEffects/FlipImageDialog.tscn
index 53351d60b..5487adecd 100644
--- a/src/UI/Dialogs/ImageEffects/FlipImageDialog.tscn
+++ b/src/UI/Dialogs/ImageEffects/FlipImageDialog.tscn
@@ -4,27 +4,33 @@
 [ext_resource path="res://src/UI/Dialogs/ImageEffects/ImageEffectParent.tscn" type="PackedScene" id=2]
 
 [node name="FlipImageDialog" instance=ExtResource( 2 )]
+margin_right = 376.0
+margin_bottom = 324.0
 window_title = "Mirror Image"
 script = ExtResource( 1 )
 
 [node name="VBoxContainer" parent="." index="3"]
 margin_bottom = 288.0
 
-[node name="AspectRatioContainer" parent="VBoxContainer" index="0"]
-margin_right = 278.0
+[node name="ShowAnimate" parent="VBoxContainer" index="0"]
+visible = false
+
+[node name="AspectRatioContainer" parent="VBoxContainer" index="1"]
+margin_bottom = 224.0
 
 [node name="Preview" parent="VBoxContainer/AspectRatioContainer" index="0"]
-margin_left = 39.0
-margin_right = 239.0
+margin_left = 80.0
+margin_right = 280.0
+margin_bottom = 200.0
 
-[node name="FlipOptions" type="GridContainer" parent="VBoxContainer" index="1"]
-margin_top = 204.0
-margin_right = 278.0
-margin_bottom = 228.0
+[node name="FlipOptions" type="GridContainer" parent="VBoxContainer" index="2"]
+margin_top = 228.0
+margin_right = 360.0
+margin_bottom = 252.0
 columns = 2
 
 [node name="FlipHorizontal" type="CheckBox" parent="VBoxContainer/FlipOptions" index="0"]
-margin_right = 137.0
+margin_right = 178.0
 margin_bottom = 24.0
 mouse_default_cursor_shape = 2
 size_flags_horizontal = 3
@@ -32,36 +38,22 @@ pressed = true
 text = "Horizontal"
 
 [node name="FlipVertical" type="CheckBox" parent="VBoxContainer/FlipOptions" index="1"]
-margin_left = 141.0
-margin_right = 278.0
+margin_left = 182.0
+margin_right = 360.0
 margin_bottom = 24.0
 mouse_default_cursor_shape = 2
 size_flags_horizontal = 3
 text = "Vertical"
 
-[node name="OptionsContainer" parent="VBoxContainer" index="2"]
-margin_top = 232.0
-margin_right = 278.0
-margin_bottom = 256.0
+[node name="OptionsContainer" parent="VBoxContainer" index="3"]
+margin_top = 256.0
+margin_bottom = 280.0
 
 [node name="AffectOptionButton" parent="VBoxContainer/OptionsContainer" index="1"]
-margin_right = 278.0
+items = [ "Selected cels", null, false, 0, null, "Current frame", null, false, 1, null, "All frames", null, false, 2, null, "All projects", null, false, 3, null ]
 
-[node name="AnimationOptions" parent="VBoxContainer" index="3"]
-visible = false
-margin_top = 260.0
-margin_right = 278.0
-margin_bottom = 294.0
-
-[node name="PanelContainer" parent="VBoxContainer/AnimationOptions" index="1"]
-margin_right = 157.0
-
-[node name="AnimateMenu" parent="VBoxContainer/AnimationOptions/PanelContainer" index="0"]
-margin_right = 88.0
-
-[node name="InitalButton" parent="VBoxContainer/AnimationOptions" index="2"]
-margin_left = 161.0
-margin_right = 278.0
+[node name="AnimateDialog" parent="." index="4"]
+margin_bottom = 288.0
 
 [connection signal="toggled" from="VBoxContainer/FlipOptions/FlipHorizontal" to="." method="_on_FlipHorizontal_toggled"]
 [connection signal="toggled" from="VBoxContainer/FlipOptions/FlipVertical" to="." method="_on_FlipVertical_toggled"]
diff --git a/src/UI/Dialogs/ImageEffects/GradientDialog.tscn b/src/UI/Dialogs/ImageEffects/GradientDialog.tscn
index a75b52f0b..db7fd2030 100644
--- a/src/UI/Dialogs/ImageEffects/GradientDialog.tscn
+++ b/src/UI/Dialogs/ImageEffects/GradientDialog.tscn
@@ -11,39 +11,43 @@ window_title = "Gradient"
 script = ExtResource( 1 )
 
 [node name="VBoxContainer" parent="." index="3"]
-margin_bottom = 444.0
+margin_bottom = 468.0
 
-[node name="AspectRatioContainer" parent="VBoxContainer" index="0"]
-margin_right = 278.0
+[node name="ShowAnimate" parent="VBoxContainer" index="0"]
+visible = false
+
+[node name="AspectRatioContainer" parent="VBoxContainer" index="1"]
+margin_bottom = 224.0
 
 [node name="Preview" parent="VBoxContainer/AspectRatioContainer" index="0"]
-margin_left = 39.0
-margin_right = 239.0
+margin_left = 80.0
+margin_right = 280.0
+margin_bottom = 200.0
 
-[node name="GradientEdit" parent="VBoxContainer" index="1" instance=ExtResource( 3 )]
+[node name="GradientEdit" parent="VBoxContainer" index="2" instance=ExtResource( 3 )]
 anchor_right = 0.0
 anchor_bottom = 0.0
-margin_top = 204.0
-margin_right = 278.0
-margin_bottom = 282.0
+margin_top = 228.0
+margin_right = 360.0
+margin_bottom = 306.0
 
-[node name="GradientOptions" type="GridContainer" parent="VBoxContainer" index="2"]
-margin_top = 286.0
-margin_right = 278.0
-margin_bottom = 408.0
+[node name="GradientOptions" type="GridContainer" parent="VBoxContainer" index="3"]
+margin_top = 310.0
+margin_right = 360.0
+margin_bottom = 432.0
 columns = 2
 
 [node name="ShapeLabel" type="Label" parent="VBoxContainer/GradientOptions" index="0" groups=["gradient_common"]]
 margin_top = 3.0
-margin_right = 137.0
+margin_right = 178.0
 margin_bottom = 17.0
 size_flags_horizontal = 3
 text = "Shape:"
 
 [node name="ShapeOptionButton" type="OptionButton" parent="VBoxContainer/GradientOptions" index="1" groups=["gradient_common"]]
 unique_name_in_owner = true
-margin_left = 141.0
-margin_right = 278.0
+margin_left = 182.0
+margin_right = 360.0
 margin_bottom = 20.0
 mouse_default_cursor_shape = 2
 size_flags_horizontal = 3
@@ -54,15 +58,15 @@ selected = 0
 [node name="DitheringLabel" type="Label" parent="VBoxContainer/GradientOptions" index="2" groups=["gradient_common"]]
 unique_name_in_owner = true
 margin_top = 27.0
-margin_right = 137.0
+margin_right = 178.0
 margin_bottom = 41.0
 text = "Dithering pattern:"
 
 [node name="DitheringOptionButton" type="OptionButton" parent="VBoxContainer/GradientOptions" index="3" groups=["gradient_common"]]
 unique_name_in_owner = true
-margin_left = 141.0
+margin_left = 182.0
 margin_top = 24.0
-margin_right = 278.0
+margin_right = 360.0
 margin_bottom = 44.0
 mouse_default_cursor_shape = 2
 text = "None"
@@ -71,15 +75,15 @@ selected = 0
 
 [node name="RepeatLabel" type="Label" parent="VBoxContainer/GradientOptions" index="4" groups=["gradient_common"]]
 margin_top = 51.0
-margin_right = 137.0
+margin_right = 178.0
 margin_bottom = 65.0
 text = "Repeat:"
 
 [node name="RepeatOptionButton" type="OptionButton" parent="VBoxContainer/GradientOptions" index="5" groups=["gradient_common"]]
 unique_name_in_owner = true
-margin_left = 141.0
+margin_left = 182.0
 margin_top = 48.0
-margin_right = 278.0
+margin_right = 360.0
 margin_bottom = 68.0
 mouse_default_cursor_shape = 2
 text = "None"
@@ -88,15 +92,15 @@ selected = 0
 
 [node name="PositionLabel" type="Label" parent="VBoxContainer/GradientOptions" index="6" groups=["gradient_linear"]]
 margin_top = 72.0
-margin_right = 137.0
+margin_right = 178.0
 margin_bottom = 86.0
 text = "Position:"
 
 [node name="PositionSlider" type="TextureProgress" parent="VBoxContainer/GradientOptions" index="7" groups=["gradient_linear"]]
 unique_name_in_owner = true
-margin_left = 141.0
+margin_left = 182.0
 margin_top = 72.0
-margin_right = 278.0
+margin_right = 360.0
 margin_bottom = 86.0
 mouse_default_cursor_shape = 2
 theme_type_variation = "ValueSlider"
@@ -114,15 +118,15 @@ snap_step = 10.0
 
 [node name="SizeLabel" type="Label" parent="VBoxContainer/GradientOptions" index="8" groups=["gradient_linear"]]
 margin_top = 90.0
-margin_right = 137.0
+margin_right = 178.0
 margin_bottom = 104.0
 text = "Size:"
 
 [node name="SizeSlider" type="TextureProgress" parent="VBoxContainer/GradientOptions" index="9" groups=["gradient_linear"]]
 unique_name_in_owner = true
-margin_left = 141.0
+margin_left = 182.0
 margin_top = 90.0
-margin_right = 278.0
+margin_right = 360.0
 margin_bottom = 104.0
 mouse_default_cursor_shape = 2
 theme_type_variation = "ValueSlider"
@@ -141,15 +145,15 @@ snap_step = 10.0
 
 [node name="AngleLabel" type="Label" parent="VBoxContainer/GradientOptions" index="10" groups=["gradient_linear"]]
 margin_top = 108.0
-margin_right = 137.0
+margin_right = 178.0
 margin_bottom = 122.0
 text = "Angle:"
 
 [node name="AngleSlider" type="TextureProgress" parent="VBoxContainer/GradientOptions" index="11" groups=["gradient_linear"]]
 unique_name_in_owner = true
-margin_left = 141.0
+margin_left = 182.0
 margin_top = 108.0
-margin_right = 278.0
+margin_right = 360.0
 margin_bottom = 122.0
 mouse_default_cursor_shape = 2
 theme_type_variation = "ValueSlider"
@@ -200,30 +204,15 @@ step = 0.01
 allow_greater = true
 show_ratio = true
 
-[node name="OptionsContainer" parent="VBoxContainer" index="3"]
-margin_top = 412.0
-margin_right = 278.0
-margin_bottom = 436.0
+[node name="OptionsContainer" parent="VBoxContainer" index="4"]
+margin_top = 436.0
+margin_bottom = 460.0
 
 [node name="AffectOptionButton" parent="VBoxContainer/OptionsContainer" index="1"]
-margin_right = 278.0
 items = [ "Selected cels", null, false, 0, null, "Current frame", null, false, 1, null, "All frames", null, false, 2, null, "All projects", null, false, 3, null ]
 
-[node name="AnimationOptions" parent="VBoxContainer" index="4"]
-visible = false
-margin_top = 440.0
-margin_right = 278.0
-margin_bottom = 474.0
-
-[node name="PanelContainer" parent="VBoxContainer/AnimationOptions" index="1"]
-margin_right = 157.0
-
-[node name="AnimateMenu" parent="VBoxContainer/AnimationOptions/PanelContainer" index="0"]
-margin_right = 88.0
-
-[node name="InitalButton" parent="VBoxContainer/AnimationOptions" index="2"]
-margin_left = 161.0
-margin_right = 278.0
+[node name="AnimateDialog" parent="." index="4"]
+margin_bottom = 468.0
 
 [connection signal="updated" from="VBoxContainer/GradientEdit" to="." method="_on_GradientEdit_updated"]
 [connection signal="item_selected" from="VBoxContainer/GradientOptions/ShapeOptionButton" to="." method="_on_ShapeOptionButton_item_selected"]
diff --git a/src/UI/Dialogs/ImageEffects/GradientMapDialog.tscn b/src/UI/Dialogs/ImageEffects/GradientMapDialog.tscn
index f2379d466..541e8c09f 100644
--- a/src/UI/Dialogs/ImageEffects/GradientMapDialog.tscn
+++ b/src/UI/Dialogs/ImageEffects/GradientMapDialog.tscn
@@ -9,17 +9,32 @@ window_title = "Gradient Map"
 script = ExtResource( 3 )
 
 [node name="VBoxContainer" parent="." index="3"]
-margin_bottom = 318.0
+margin_bottom = 342.0
 
-[node name="GradientEdit" parent="VBoxContainer" index="1" instance=ExtResource( 2 )]
+[node name="ShowAnimate" parent="VBoxContainer" index="0"]
+visible = false
+
+[node name="AspectRatioContainer" parent="VBoxContainer" index="1"]
+margin_bottom = 224.0
+
+[node name="Preview" parent="VBoxContainer/AspectRatioContainer" index="0"]
+margin_left = 80.0
+margin_right = 280.0
+margin_bottom = 200.0
+
+[node name="GradientEdit" parent="VBoxContainer" index="2" instance=ExtResource( 2 )]
 anchor_right = 0.0
 anchor_bottom = 0.0
-margin_top = 204.0
-margin_right = 278.0
-margin_bottom = 282.0
+margin_top = 228.0
+margin_right = 360.0
+margin_bottom = 306.0
+
+[node name="OptionsContainer" parent="VBoxContainer" index="3"]
+margin_top = 310.0
+margin_bottom = 334.0
 
 [node name="AffectOptionButton" parent="VBoxContainer/OptionsContainer" index="1"]
 items = [ "Selected cels", null, false, 0, null, "Current frame", null, false, 1, null, "All frames", null, false, 2, null, "All projects", null, false, 3, null ]
 
-[node name="AnimationOptions" parent="VBoxContainer" index="3"]
-visible = false
+[node name="AnimateDialog" parent="." index="4"]
+margin_bottom = 342.0
diff --git a/src/UI/Dialogs/ImageEffects/HSVDialog.gd b/src/UI/Dialogs/ImageEffects/HSVDialog.gd
index 49a134518..a4766d7b6 100644
--- a/src/UI/Dialogs/ImageEffects/HSVDialog.gd
+++ b/src/UI/Dialogs/ImageEffects/HSVDialog.gd
@@ -12,6 +12,10 @@ func _ready() -> void:
 	var sm := ShaderMaterial.new()
 	sm.shader = shader
 	preview.set_material(sm)
+	# set as in enum
+	animate_panel.add_float_property("Hue", hue_slider)
+	animate_panel.add_float_property("Saturation", sat_slider)
+	animate_panel.add_float_property("Value", val_slider)
 
 
 func _about_to_show() -> void:
@@ -19,25 +23,10 @@ func _about_to_show() -> void:
 	._about_to_show()
 
 
-func set_animate_menu(_elements) -> void:
-	# set as in enum
-	animate_menu.add_check_item("Hue", Animate.HUE)
-	animate_menu.add_check_item("Saturation", Animate.SATURATION)
-	animate_menu.add_check_item("Value", Animate.VALUE)
-	.set_animate_menu(Animate.size())
-
-
-func set_initial_values() -> void:
-	initial_values[Animate.HUE] = hue_slider.value
-	initial_values[Animate.SATURATION] = sat_slider.value
-	initial_values[Animate.VALUE] = val_slider.value
-
-
 func commit_action(cel: Image, project: Project = Global.current_project) -> void:
-	.commit_action(cel, project)
-	var hue = get_animated_value(project, hue_slider.value / 360, Animate.HUE)
-	var sat = get_animated_value(project, sat_slider.value / 360, Animate.SATURATION)
-	var val = get_animated_value(project, val_slider.value / 360, Animate.VALUE)
+	var hue = animate_panel.get_animated_values(commit_idx, Animate.HUE) / 360
+	var sat = animate_panel.get_animated_values(commit_idx, Animate.SATURATION) / 100
+	var val = animate_panel.get_animated_values(commit_idx, Animate.VALUE) / 100
 	var selection_tex := ImageTexture.new()
 	if selection_checkbox.pressed and project.has_selection:
 		selection_tex.create_from_image(project.selection_map, 0)
diff --git a/src/UI/Dialogs/ImageEffects/HSVDialog.tscn b/src/UI/Dialogs/ImageEffects/HSVDialog.tscn
index f6b4db507..6b413df0c 100644
--- a/src/UI/Dialogs/ImageEffects/HSVDialog.tscn
+++ b/src/UI/Dialogs/ImageEffects/HSVDialog.tscn
@@ -5,36 +5,49 @@
 [ext_resource path="res://src/UI/Nodes/ValueSlider.tscn" type="PackedScene" id=3]
 
 [node name="HSVDialog" instance=ExtResource( 2 )]
+visible = false
 window_title = "Adjust HSV"
 script = ExtResource( 1 )
 
 [node name="VBoxContainer" parent="." index="3"]
 margin_bottom = 344.0
 
-[node name="HueSlider" parent="VBoxContainer" index="1" instance=ExtResource( 3 )]
-margin_top = 232.0
-margin_right = 332.0
-margin_bottom = 256.0
+[node name="AspectRatioContainer" parent="VBoxContainer" index="1"]
+margin_bottom = 224.0
+
+[node name="Preview" parent="VBoxContainer/AspectRatioContainer" index="0"]
+margin_left = 80.0
+margin_right = 280.0
+margin_bottom = 200.0
+
+[node name="HueSlider" parent="VBoxContainer" index="2" instance=ExtResource( 3 )]
+margin_top = 228.0
+margin_right = 360.0
+margin_bottom = 252.0
 min_value = -180.0
 max_value = 180.0
 prefix = "Hue:"
 
-[node name="SaturationSlider" parent="VBoxContainer" index="2" instance=ExtResource( 3 )]
-margin_top = 260.0
-margin_right = 332.0
-margin_bottom = 284.0
+[node name="SaturationSlider" parent="VBoxContainer" index="3" instance=ExtResource( 3 )]
+margin_top = 256.0
+margin_right = 360.0
+margin_bottom = 280.0
 min_value = -100.0
 prefix = "Saturation:"
 
-[node name="ValueSlider" parent="VBoxContainer" index="3" instance=ExtResource( 3 )]
-margin_top = 288.0
-margin_right = 332.0
-margin_bottom = 312.0
+[node name="ValueSlider" parent="VBoxContainer" index="4" instance=ExtResource( 3 )]
+margin_top = 284.0
+margin_right = 360.0
+margin_bottom = 308.0
 min_value = -100.0
 prefix = "Value:"
 
-[node name="AffectOptionButton" parent="VBoxContainer/OptionsContainer" index="1"]
-items = [ "Selected cels", null, false, 0, null, "Current frame", null, false, 1, null, "All frames", null, false, 2, null, "All projects", null, false, 3, null ]
+[node name="OptionsContainer" parent="VBoxContainer" index="5"]
+margin_top = 312.0
+margin_bottom = 336.0
+
+[node name="AnimateDialog" parent="." index="4"]
+margin_bottom = 344.0
 
 [connection signal="value_changed" from="VBoxContainer/HueSlider" to="." method="_on_HueSlider_value_changed"]
 [connection signal="value_changed" from="VBoxContainer/SaturationSlider" to="." method="_on_SaturationSlider_value_changed"]
diff --git a/src/UI/Dialogs/ImageEffects/ImageEffectParent.tscn b/src/UI/Dialogs/ImageEffects/ImageEffectParent.tscn
index f0e89958c..9e1b31b17 100644
--- a/src/UI/Dialogs/ImageEffects/ImageEffectParent.tscn
+++ b/src/UI/Dialogs/ImageEffects/ImageEffectParent.tscn
@@ -1,31 +1,53 @@
-[gd_scene load_steps=2 format=2]
+[gd_scene load_steps=5 format=2]
 
+[ext_resource path="res://src/UI/Nodes/AnimatePanel.tscn" type="PackedScene" id=1]
 [ext_resource path="res://src/UI/Nodes/TransparentChecker.tscn" type="PackedScene" id=2]
+[ext_resource path="res://src/Classes/ImageEffect.gd" type="Script" id=3]
+[ext_resource path="res://assets/graphics/misc/animate.png" type="Texture" id=4]
 
 [node name="ImageEffectParent" type="ConfirmationDialog"]
 margin_right = 294.0
-margin_bottom = 296.0
+margin_bottom = 334.0
 rect_min_size = Vector2( 172, 60.2 )
 resizable = true
+script = ExtResource( 3 )
 
 [node name="VBoxContainer" type="VBoxContainer" parent="."]
 margin_left = 8.0
 margin_top = 8.0
-margin_right = 286.0
-margin_bottom = 260.0
-__meta__ = {
-"_edit_use_anchors_": false
-}
+margin_right = 368.0
+margin_bottom = 298.0
+
+[node name="ShowAnimate" type="Button" parent="VBoxContainer"]
+unique_name_in_owner = true
+margin_left = 340.0
+margin_right = 360.0
+margin_bottom = 20.0
+rect_min_size = Vector2( 20, 0 )
+size_flags_horizontal = 8
+toggle_mode = true
+
+[node name="TextureRect" type="TextureRect" parent="VBoxContainer/ShowAnimate"]
+anchor_right = 1.0
+anchor_bottom = 1.0
+margin_left = 2.0
+margin_top = 2.0
+margin_right = -2.0
+margin_bottom = -2.0
+texture = ExtResource( 4 )
+expand = true
+stretch_mode = 6
 
 [node name="AspectRatioContainer" type="AspectRatioContainer" parent="VBoxContainer"]
-margin_right = 279.0
-margin_bottom = 200.0
+margin_top = 24.0
+margin_right = 360.0
+margin_bottom = 262.0
 size_flags_vertical = 3
 
 [node name="Preview" type="TextureRect" parent="VBoxContainer/AspectRatioContainer"]
-margin_left = 39.5
-margin_right = 239.5
-margin_bottom = 200.0
+margin_left = 61.0
+margin_right = 299.0
+margin_bottom = 238.0
 rect_min_size = Vector2( 200, 200 )
 expand = true
 stretch_mode = 5
@@ -38,12 +60,12 @@ margin_right = 0.0
 margin_bottom = 0.0
 
 [node name="OptionsContainer" type="HBoxContainer" parent="VBoxContainer"]
-margin_top = 204.0
-margin_right = 279.0
-margin_bottom = 228.0
+margin_top = 266.0
+margin_right = 360.0
+margin_bottom = 290.0
 
 [node name="SelectionCheckBox" type="CheckBox" parent="VBoxContainer/OptionsContainer"]
-margin_right = 160.0
+margin_right = 178.0
 margin_bottom = 24.0
 mouse_default_cursor_shape = 2
 size_flags_horizontal = 3
@@ -51,8 +73,8 @@ pressed = true
 text = "Only affect selection"
 
 [node name="AffectOptionButton" type="OptionButton" parent="VBoxContainer/OptionsContainer"]
-margin_left = 164.0
-margin_right = 279.0
+margin_left = 182.0
+margin_right = 360.0
 margin_bottom = 24.0
 mouse_default_cursor_shape = 2
 size_flags_horizontal = 3
@@ -60,36 +82,16 @@ text = "Selected cels"
 items = [ "Selected cels", null, false, 0, null, "Current frame", null, false, 1, null, "All frames", null, false, 2, null, "All projects", null, false, 3, null ]
 selected = 0
 
-[node name="AnimationOptions" type="HBoxContainer" parent="VBoxContainer"]
-margin_top = 232.0
-margin_right = 279.0
-margin_bottom = 266.0
+[node name="AnimateDialog" type="Popup" parent="."]
+margin_left = 8.0
+margin_top = 8.0
+margin_right = 368.0
+margin_bottom = 298.0
+rect_min_size = Vector2( 360, 270 )
 
-[node name="Label" type="Label" parent="VBoxContainer/AnimationOptions"]
-margin_top = 10.0
-margin_right = 58.0
-margin_bottom = 24.0
-text = "Animate:"
-
-[node name="PanelContainer" type="PanelContainer" parent="VBoxContainer/AnimationOptions"]
-margin_left = 62.0
-margin_right = 158.0
-margin_bottom = 34.0
-size_flags_horizontal = 3
-
-[node name="AnimateMenu" type="MenuButton" parent="VBoxContainer/AnimationOptions/PanelContainer"]
+[node name="AnimatePanel" parent="AnimateDialog" instance=ExtResource( 1 )]
 unique_name_in_owner = true
-margin_left = 7.0
-margin_top = 7.0
-margin_right = 89.0
-margin_bottom = 27.0
-focus_mode = 2
-text = "Properties"
-flat = false
-
-[node name="InitalButton" type="Button" parent="VBoxContainer/AnimationOptions"]
-unique_name_in_owner = true
-margin_left = 162.0
-margin_right = 279.0
-margin_bottom = 34.0
-text = "Set initial values"
+anchor_right = 1.0
+anchor_bottom = 1.0
+margin_right = 0.0
+margin_bottom = 0.0
diff --git a/src/UI/Dialogs/ImageEffects/InvertColorsDialog.tscn b/src/UI/Dialogs/ImageEffects/InvertColorsDialog.tscn
index ae0891e9f..d1228253b 100644
--- a/src/UI/Dialogs/ImageEffects/InvertColorsDialog.tscn
+++ b/src/UI/Dialogs/ImageEffects/InvertColorsDialog.tscn
@@ -7,21 +7,25 @@
 window_title = "Invert Colors"
 script = ExtResource( 1 )
 
-[node name="AspectRatioContainer" parent="VBoxContainer" index="0"]
-margin_right = 278.0
+[node name="ShowAnimate" parent="VBoxContainer" index="0"]
+visible = false
+
+[node name="AspectRatioContainer" parent="VBoxContainer" index="1"]
+margin_bottom = 238.0
 
 [node name="Preview" parent="VBoxContainer/AspectRatioContainer" index="0"]
-margin_left = 39.0
-margin_right = 239.0
+margin_left = 73.0
+margin_right = 287.0
+margin_bottom = 214.0
 
-[node name="RGBAContainer" type="HBoxContainer" parent="VBoxContainer" index="1"]
-margin_top = 204.0
-margin_right = 278.0
-margin_bottom = 224.0
+[node name="RGBAContainer" type="HBoxContainer" parent="VBoxContainer" index="2"]
+margin_top = 242.0
+margin_right = 360.0
+margin_bottom = 262.0
 alignment = 1
 
 [node name="RButton" type="Button" parent="VBoxContainer/RGBAContainer" index="0"]
-margin_right = 66.0
+margin_right = 87.0
 margin_bottom = 20.0
 hint_tooltip = "Modify Red Channel"
 mouse_default_cursor_shape = 2
@@ -31,8 +35,8 @@ pressed = true
 text = "R"
 
 [node name="GButton" type="Button" parent="VBoxContainer/RGBAContainer" index="1"]
-margin_left = 70.0
-margin_right = 137.0
+margin_left = 91.0
+margin_right = 178.0
 margin_bottom = 20.0
 hint_tooltip = "Modify Green Channel"
 mouse_default_cursor_shape = 2
@@ -42,8 +46,8 @@ pressed = true
 text = "G"
 
 [node name="BButton" type="Button" parent="VBoxContainer/RGBAContainer" index="2"]
-margin_left = 141.0
-margin_right = 207.0
+margin_left = 182.0
+margin_right = 269.0
 margin_bottom = 20.0
 hint_tooltip = "Modify Blue Channel"
 mouse_default_cursor_shape = 2
@@ -53,8 +57,8 @@ pressed = true
 text = "B"
 
 [node name="AButton" type="Button" parent="VBoxContainer/RGBAContainer" index="3"]
-margin_left = 211.0
-margin_right = 278.0
+margin_left = 273.0
+margin_right = 360.0
 margin_bottom = 20.0
 hint_tooltip = "Modify Alpha Channel"
 mouse_default_cursor_shape = 2
@@ -62,31 +66,9 @@ size_flags_horizontal = 3
 toggle_mode = true
 text = "A"
 
-[node name="OptionsContainer" parent="VBoxContainer" index="2"]
-margin_top = 228.0
-margin_right = 278.0
-margin_bottom = 252.0
-
 [node name="AffectOptionButton" parent="VBoxContainer/OptionsContainer" index="1"]
-margin_right = 278.0
 items = [ "Selected cels", null, false, 0, null, "Current frame", null, false, 1, null, "All frames", null, false, 2, null, "All projects", null, false, 3, null ]
 
-[node name="AnimationOptions" parent="VBoxContainer" index="3"]
-visible = false
-margin_top = 256.0
-margin_right = 278.0
-margin_bottom = 290.0
-
-[node name="PanelContainer" parent="VBoxContainer/AnimationOptions" index="1"]
-margin_right = 157.0
-
-[node name="AnimateMenu" parent="VBoxContainer/AnimationOptions/PanelContainer" index="0"]
-margin_right = 88.0
-
-[node name="InitalButton" parent="VBoxContainer/AnimationOptions" index="2"]
-margin_left = 161.0
-margin_right = 278.0
-
 [connection signal="toggled" from="VBoxContainer/RGBAContainer/RButton" to="." method="_on_RButton_toggled"]
 [connection signal="toggled" from="VBoxContainer/RGBAContainer/GButton" to="." method="_on_GButton_toggled"]
 [connection signal="toggled" from="VBoxContainer/RGBAContainer/BButton" to="." method="_on_BButton_toggled"]
diff --git a/src/UI/Dialogs/ImageEffects/OutlineDialog.gd b/src/UI/Dialogs/ImageEffects/OutlineDialog.gd
index 9e85cedbb..d7a488f03 100644
--- a/src/UI/Dialogs/ImageEffects/OutlineDialog.gd
+++ b/src/UI/Dialogs/ImageEffects/OutlineDialog.gd
@@ -20,21 +20,12 @@ func _ready() -> void:
 		preview.set_material(sm)
 	outline_color.get_picker().presets_visible = false
 	color = outline_color.color
-
-
-func set_animate_menu(_elements) -> void:
 	# set as in enum
-	animate_menu.add_check_item("Thickness", Animate.THICKNESS)
-	.set_animate_menu(Animate.size())
-
-
-func set_initial_values() -> void:
-	initial_values[Animate.THICKNESS] = thickness
+	animate_panel.add_float_property("Thickness", $VBoxContainer/OutlineOptions/ThickValue)
 
 
 func commit_action(cel: Image, project: Project = Global.current_project) -> void:
-	.commit_action(cel, project)
-	var anim_thickness = get_animated_value(project, thickness, Animate.THICKNESS)
+	var anim_thickness = animate_panel.get_animated_values(commit_idx, Animate.THICKNESS)
 
 	if !shader:  # Web version
 		DrawingAlgos.generate_outline(
diff --git a/src/UI/Dialogs/ImageEffects/OutlineDialog.tscn b/src/UI/Dialogs/ImageEffects/OutlineDialog.tscn
index 9fdaa4e98..4616d23b6 100644
--- a/src/UI/Dialogs/ImageEffects/OutlineDialog.tscn
+++ b/src/UI/Dialogs/ImageEffects/OutlineDialog.tscn
@@ -5,23 +5,25 @@
 [ext_resource path="res://src/UI/Dialogs/ImageEffects/ImageEffectParent.tscn" type="PackedScene" id=3]
 
 [node name="OutlineDialog" instance=ExtResource( 3 )]
+visible = false
 window_title = "Outline"
 script = ExtResource( 1 )
 
 [node name="VBoxContainer" parent="." index="3"]
 margin_bottom = 354.0
 
-[node name="AspectRatioContainer" parent="VBoxContainer" index="0"]
-margin_right = 278.0
+[node name="AspectRatioContainer" parent="VBoxContainer" index="1"]
+margin_bottom = 224.0
 
 [node name="Preview" parent="VBoxContainer/AspectRatioContainer" index="0"]
-margin_left = 39.0
-margin_right = 239.0
+margin_left = 80.0
+margin_right = 280.0
+margin_bottom = 200.0
 
-[node name="OutlineOptions" type="GridContainer" parent="VBoxContainer" index="1"]
-margin_top = 204.0
-margin_right = 278.0
-margin_bottom = 294.0
+[node name="OutlineOptions" type="GridContainer" parent="VBoxContainer" index="2"]
+margin_top = 228.0
+margin_right = 360.0
+margin_bottom = 318.0
 custom_constants/vseparation = 4
 custom_constants/hseparation = 4
 columns = 2
@@ -30,14 +32,14 @@ __meta__ = {
 }
 
 [node name="ThickLabel" type="Label" parent="VBoxContainer/OutlineOptions" index="0"]
-margin_right = 137.0
+margin_right = 178.0
 margin_bottom = 14.0
 size_flags_horizontal = 3
 text = "Thickness:"
 
 [node name="ThickValue" type="TextureProgress" parent="VBoxContainer/OutlineOptions" index="1"]
-margin_left = 141.0
-margin_right = 278.0
+margin_left = 182.0
+margin_right = 360.0
 margin_bottom = 14.0
 mouse_default_cursor_shape = 2
 theme_type_variation = "ValueSlider"
@@ -54,30 +56,30 @@ suffix = "px"
 
 [node name="OutlineColorLabel" type="Label" parent="VBoxContainer/OutlineOptions" index="2"]
 margin_top = 21.0
-margin_right = 137.0
+margin_right = 178.0
 margin_bottom = 35.0
 size_flags_horizontal = 3
 text = "Fill with color:"
 
 [node name="OutlineColor" type="ColorPickerButton" parent="VBoxContainer/OutlineOptions" index="3"]
-margin_left = 141.0
+margin_left = 182.0
 margin_top = 18.0
-margin_right = 278.0
+margin_right = 360.0
 margin_bottom = 38.0
 rect_min_size = Vector2( 64, 20 )
 size_flags_horizontal = 3
 
 [node name="PatternLabel" type="Label" parent="VBoxContainer/OutlineOptions" index="4"]
 margin_top = 45.0
-margin_right = 137.0
+margin_right = 178.0
 margin_bottom = 59.0
 size_flags_horizontal = 3
 text = "Pattern:"
 
 [node name="PatternOptionButton" type="OptionButton" parent="VBoxContainer/OutlineOptions" index="5"]
-margin_left = 141.0
+margin_left = 182.0
 margin_top = 42.0
-margin_right = 278.0
+margin_right = 360.0
 margin_bottom = 62.0
 mouse_default_cursor_shape = 2
 size_flags_horizontal = 3
@@ -87,43 +89,26 @@ selected = 0
 
 [node name="InsideImageLabel" type="Label" parent="VBoxContainer/OutlineOptions" index="6"]
 margin_top = 71.0
-margin_right = 137.0
+margin_right = 178.0
 margin_bottom = 85.0
 size_flags_horizontal = 3
 text = "Place inside image"
 
 [node name="InsideImageCheckBox" type="CheckBox" parent="VBoxContainer/OutlineOptions" index="7"]
-margin_left = 141.0
+margin_left = 182.0
 margin_top = 66.0
-margin_right = 278.0
+margin_right = 360.0
 margin_bottom = 90.0
 mouse_default_cursor_shape = 2
 size_flags_horizontal = 3
 text = "On"
 
-[node name="OptionsContainer" parent="VBoxContainer" index="2"]
-margin_top = 298.0
-margin_right = 278.0
-margin_bottom = 322.0
+[node name="OptionsContainer" parent="VBoxContainer" index="3"]
+margin_top = 322.0
+margin_bottom = 346.0
 
-[node name="AffectOptionButton" parent="VBoxContainer/OptionsContainer" index="1"]
-margin_right = 278.0
-items = [ "Selected cels", null, false, 0, null, "Current frame", null, false, 1, null, "All frames", null, false, 2, null, "All projects", null, false, 3, null ]
-
-[node name="AnimationOptions" parent="VBoxContainer" index="3"]
-margin_top = 326.0
-margin_right = 278.0
-margin_bottom = 360.0
-
-[node name="PanelContainer" parent="VBoxContainer/AnimationOptions" index="1"]
-margin_right = 157.0
-
-[node name="AnimateMenu" parent="VBoxContainer/AnimationOptions/PanelContainer" index="0"]
-margin_right = 88.0
-
-[node name="InitalButton" parent="VBoxContainer/AnimationOptions" index="2"]
-margin_left = 161.0
-margin_right = 278.0
+[node name="AnimateDialog" parent="." index="4"]
+margin_bottom = 354.0
 
 [connection signal="value_changed" from="VBoxContainer/OutlineOptions/ThickValue" to="." method="_on_ThickValue_value_changed"]
 [connection signal="color_changed" from="VBoxContainer/OutlineOptions/OutlineColor" to="." method="_on_OutlineColor_color_changed"]
diff --git a/src/UI/Dialogs/ImageEffects/Posterize.tscn b/src/UI/Dialogs/ImageEffects/Posterize.tscn
index bcf935b88..3265ed0b0 100644
--- a/src/UI/Dialogs/ImageEffects/Posterize.tscn
+++ b/src/UI/Dialogs/ImageEffects/Posterize.tscn
@@ -9,19 +9,23 @@ window_title = "Posterize"
 script = ExtResource( 3 )
 
 [node name="VBoxContainer" parent="." index="3"]
-margin_bottom = 292.0
+margin_bottom = 316.0
 
-[node name="AspectRatioContainer" parent="VBoxContainer" index="0"]
-margin_right = 278.0
+[node name="ShowAnimate" parent="VBoxContainer" index="0"]
+visible = false
+
+[node name="AspectRatioContainer" parent="VBoxContainer" index="1"]
+margin_bottom = 224.0
 
 [node name="Preview" parent="VBoxContainer/AspectRatioContainer" index="0"]
-margin_left = 39.0
-margin_right = 239.0
+margin_left = 80.0
+margin_right = 280.0
+margin_bottom = 200.0
 
-[node name="LevelsSlider" type="TextureProgress" parent="VBoxContainer" index="1"]
-margin_top = 204.0
-margin_right = 278.0
-margin_bottom = 228.0
+[node name="LevelsSlider" type="TextureProgress" parent="VBoxContainer" index="2"]
+margin_top = 228.0
+margin_right = 360.0
+margin_bottom = 252.0
 rect_min_size = Vector2( 0, 24 )
 mouse_default_cursor_shape = 2
 theme_type_variation = "ValueSlider"
@@ -38,10 +42,10 @@ script = ExtResource( 2 )
 prefix = "Posterize levels:"
 snap_by_default = true
 
-[node name="DitherSlider" type="TextureProgress" parent="VBoxContainer" index="2"]
-margin_top = 232.0
-margin_right = 278.0
-margin_bottom = 256.0
+[node name="DitherSlider" type="TextureProgress" parent="VBoxContainer" index="3"]
+margin_top = 256.0
+margin_right = 360.0
+margin_bottom = 280.0
 rect_min_size = Vector2( 0, 24 )
 mouse_default_cursor_shape = 2
 theme_type_variation = "ValueSlider"
@@ -56,28 +60,15 @@ script = ExtResource( 2 )
 prefix = "Dither intensity:"
 snap_step = 0.1
 
-[node name="OptionsContainer" parent="VBoxContainer" index="3"]
-margin_top = 260.0
-margin_right = 278.0
-margin_bottom = 284.0
+[node name="OptionsContainer" parent="VBoxContainer" index="4"]
+margin_top = 284.0
+margin_bottom = 308.0
 
 [node name="AffectOptionButton" parent="VBoxContainer/OptionsContainer" index="1"]
-margin_right = 278.0
 items = [ "Selected cels", null, false, 0, null, "Current frame", null, false, 1, null, "All frames", null, false, 2, null, "All projects", null, false, 3, null ]
 
-[node name="AnimationOptions" parent="VBoxContainer" index="4"]
-visible = false
-margin_right = 278.0
-
-[node name="PanelContainer" parent="VBoxContainer/AnimationOptions" index="1"]
-margin_right = 157.0
-
-[node name="AnimateMenu" parent="VBoxContainer/AnimationOptions/PanelContainer" index="0"]
-margin_right = 88.0
-
-[node name="InitalButton" parent="VBoxContainer/AnimationOptions" index="2"]
-margin_left = 161.0
-margin_right = 278.0
+[node name="AnimateDialog" parent="." index="4"]
+margin_bottom = 316.0
 
 [connection signal="value_changed" from="VBoxContainer/LevelsSlider" to="." method="_on_LevelsSlider_value_changed"]
 [connection signal="value_changed" from="VBoxContainer/DitherSlider" to="." method="_on_DitherSlider_value_changed"]
diff --git a/src/UI/Dialogs/ImageEffects/RotateImage.gd b/src/UI/Dialogs/ImageEffects/RotateImage.gd
index 5ee8fda03..e60a03bbc 100644
--- a/src/UI/Dialogs/ImageEffects/RotateImage.gd
+++ b/src/UI/Dialogs/ImageEffects/RotateImage.gd
@@ -21,6 +21,9 @@ onready var wait_time_slider: ValueSlider = $VBoxContainer/WaitTime
 
 
 func _ready() -> void:
+	# set as in enum
+	animate_panel.add_float_property("Angle", angle_slider)
+	animate_panel.add_float_property("Initial Angle", init_angle_slider)
 	if not _is_webgl1():
 		type_option_button.add_item("Rotxel with Smear", ROTXEL_SMEAR)
 		rotxel_shader = load("res://src/Shaders/Rotation/SmearRotxel.shader")
@@ -34,18 +37,6 @@ func _ready() -> void:
 	type_option_button.emit_signal("item_selected", 0)
 
 
-func set_animate_menu(_elements) -> void:
-	# set as in enum
-	animate_menu.add_check_item("Angle", Animate.ANGLE)
-	animate_menu.add_check_item("Initial Angle", Animate.INITIAL_ANGLE)
-	.set_animate_menu(Animate.size())
-
-
-func set_initial_values() -> void:
-	initial_values[Animate.ANGLE] = deg2rad(angle_slider.value)
-	initial_values[Animate.INITIAL_ANGLE] = init_angle_slider.value
-
-
 func _about_to_show() -> void:
 	if DrawingAlgos.clean_edge_shader == null:
 		DrawingAlgos.clean_edge_shader = load("res://src/Shaders/Rotation/cleanEdge.gdshader")
@@ -94,11 +85,8 @@ func _calculate_pivot() -> void:
 
 
 func commit_action(cel: Image, _project: Project = Global.current_project) -> void:
-	.commit_action(cel, _project)
-	var angle: float = get_animated_value(_project, deg2rad(angle_slider.value), Animate.ANGLE)
-	var init_angle: float = get_animated_value(
-		_project, init_angle_slider.value, Animate.INITIAL_ANGLE
-	)
+	var angle: float = deg2rad(animate_panel.get_animated_values(commit_idx, Animate.ANGLE))
+	var init_angle: float = animate_panel.get_animated_values(commit_idx, Animate.INITIAL_ANGLE)
 
 	var selection_size := cel.get_size()
 	var selection_tex := ImageTexture.new()
diff --git a/src/UI/Dialogs/ImageEffects/RotateImage.tscn b/src/UI/Dialogs/ImageEffects/RotateImage.tscn
index 4ccc88397..04a7e3d1b 100644
--- a/src/UI/Dialogs/ImageEffects/RotateImage.tscn
+++ b/src/UI/Dialogs/ImageEffects/RotateImage.tscn
@@ -6,42 +6,42 @@
 [ext_resource path="res://src/UI/Nodes/ValueSliderV2.tscn" type="PackedScene" id=4]
 
 [node name="RotateImage" instance=ExtResource( 2 )]
+visible = false
 window_title = "Rotate Image"
 script = ExtResource( 1 )
 
 [node name="VBoxContainer" parent="." index="3"]
 margin_bottom = 416.0
 
-[node name="AspectRatioContainer" parent="VBoxContainer" index="0"]
-margin_right = 278.0
-margin_bottom = 228.0
+[node name="AspectRatioContainer" parent="VBoxContainer" index="1"]
+margin_bottom = 224.0
 
 [node name="Preview" parent="VBoxContainer/AspectRatioContainer" index="0"]
-margin_left = 25.0
-margin_right = 253.0
-margin_bottom = 228.0
+margin_left = 80.0
+margin_right = 280.0
+margin_bottom = 200.0
 
 [node name="Indicator" type="Control" parent="VBoxContainer/AspectRatioContainer" index="1"]
-margin_left = 25.0
-margin_right = 253.0
-margin_bottom = 228.0
+margin_left = 80.0
+margin_right = 280.0
+margin_bottom = 200.0
 mouse_default_cursor_shape = 2
 
-[node name="LiveSettings" type="HBoxContainer" parent="VBoxContainer" index="1"]
-margin_top = 232.0
-margin_right = 278.0
-margin_bottom = 256.0
+[node name="LiveSettings" type="HBoxContainer" parent="VBoxContainer" index="2"]
+margin_top = 228.0
+margin_right = 360.0
+margin_bottom = 252.0
 alignment = 1
 
 [node name="LiveCheckbox" type="CheckBox" parent="VBoxContainer/LiveSettings" index="0"]
-margin_left = 85.0
-margin_right = 193.0
+margin_left = 126.0
+margin_right = 234.0
 margin_bottom = 24.0
 mouse_default_cursor_shape = 2
 pressed = true
 text = "Live Preview"
 
-[node name="WaitTime" parent="VBoxContainer" index="2" instance=ExtResource( 3 )]
+[node name="WaitTime" parent="VBoxContainer" index="3" instance=ExtResource( 3 )]
 visible = false
 margin_top = 232.0
 margin_right = 326.0
@@ -53,10 +53,10 @@ editable = false
 prefix = "Preview delay:"
 suffix = "ms"
 
-[node name="HBoxContainer2" type="HBoxContainer" parent="VBoxContainer" index="3"]
-margin_top = 260.0
-margin_right = 278.0
-margin_bottom = 280.0
+[node name="HBoxContainer2" type="HBoxContainer" parent="VBoxContainer" index="4"]
+margin_top = 256.0
+margin_right = 360.0
+margin_bottom = 276.0
 
 [node name="Label" type="Label" parent="VBoxContainer/HBoxContainer2" index="0"]
 margin_top = 3.0
@@ -66,24 +66,24 @@ text = "Type:"
 
 [node name="TypeOptionButton" type="OptionButton" parent="VBoxContainer/HBoxContainer2" index="1"]
 margin_left = 38.0
-margin_right = 278.0
+margin_right = 360.0
 margin_bottom = 20.0
 mouse_default_cursor_shape = 2
 size_flags_horizontal = 3
 size_flags_vertical = 3
 
-[node name="HSeparator" type="HSeparator" parent="VBoxContainer" index="4"]
-margin_top = 284.0
-margin_right = 278.0
-margin_bottom = 288.0
+[node name="HSeparator" type="HSeparator" parent="VBoxContainer" index="5"]
+margin_top = 280.0
+margin_right = 360.0
+margin_bottom = 284.0
 
-[node name="PivotOptions" type="HBoxContainer" parent="VBoxContainer" index="5"]
-margin_top = 292.0
-margin_right = 278.0
-margin_bottom = 316.0
+[node name="PivotOptions" type="HBoxContainer" parent="VBoxContainer" index="6"]
+margin_top = 288.0
+margin_right = 360.0
+margin_bottom = 312.0
 
 [node name="Pivot" parent="VBoxContainer/PivotOptions" index="0" instance=ExtResource( 4 )]
-margin_right = 220.0
+margin_right = 302.0
 margin_bottom = 24.0
 size_flags_horizontal = 3
 step = 0.5
@@ -94,73 +94,73 @@ prefix_x = "Pivot x:"
 prefix_y = "Pivot y:"
 
 [node name="Centre" type="Button" parent="VBoxContainer/PivotOptions" index="1"]
-margin_left = 224.0
-margin_right = 278.0
+margin_left = 306.0
+margin_right = 360.0
 margin_bottom = 24.0
 hint_tooltip = "Places the pivot at the center of the image, or at the center of the selection, if it is present."
 mouse_default_cursor_shape = 2
 text = "Center"
 
-[node name="HSeparator2" type="HSeparator" parent="VBoxContainer" index="6"]
-margin_top = 320.0
-margin_right = 278.0
-margin_bottom = 324.0
+[node name="HSeparator2" type="HSeparator" parent="VBoxContainer" index="7"]
+margin_top = 316.0
+margin_right = 360.0
+margin_bottom = 320.0
 
-[node name="AngleSlider" parent="VBoxContainer" index="7" instance=ExtResource( 3 )]
-margin_top = 328.0
-margin_right = 278.0
-margin_bottom = 352.0
+[node name="AngleSlider" parent="VBoxContainer" index="8" instance=ExtResource( 3 )]
+margin_top = 324.0
+margin_right = 360.0
+margin_bottom = 348.0
 max_value = 359.0
 prefix = "Angle:"
 suffix = "°"
 snap_step = 45.0
 
-[node name="QuickRotations" type="HBoxContainer" parent="VBoxContainer" index="8"]
-margin_top = 356.0
-margin_right = 278.0
-margin_bottom = 376.0
+[node name="QuickRotations" type="HBoxContainer" parent="VBoxContainer" index="9"]
+margin_top = 352.0
+margin_right = 360.0
+margin_bottom = 372.0
 alignment = 1
 
 [node name="Deduct90" type="Button" parent="VBoxContainer/QuickRotations" index="0"]
-margin_right = 52.0
+margin_right = 68.0
 margin_bottom = 20.0
 mouse_default_cursor_shape = 2
 size_flags_horizontal = 3
 text = "-90"
 
 [node name="Deduct45" type="Button" parent="VBoxContainer/QuickRotations" index="1"]
-margin_left = 56.0
-margin_right = 108.0
+margin_left = 72.0
+margin_right = 141.0
 margin_bottom = 20.0
 mouse_default_cursor_shape = 2
 size_flags_horizontal = 3
 text = "-45"
 
 [node name="Zero" type="Button" parent="VBoxContainer/QuickRotations" index="2"]
-margin_left = 112.0
-margin_right = 165.0
+margin_left = 145.0
+margin_right = 214.0
 margin_bottom = 20.0
 mouse_default_cursor_shape = 2
 size_flags_horizontal = 3
 text = "0"
 
 [node name="Add45" type="Button" parent="VBoxContainer/QuickRotations" index="3"]
-margin_left = 169.0
-margin_right = 221.0
+margin_left = 218.0
+margin_right = 287.0
 margin_bottom = 20.0
 mouse_default_cursor_shape = 2
 size_flags_horizontal = 3
 text = "+45"
 
 [node name="Add90" type="Button" parent="VBoxContainer/QuickRotations" index="4"]
-margin_left = 225.0
-margin_right = 278.0
+margin_left = 291.0
+margin_right = 360.0
 margin_bottom = 20.0
 mouse_default_cursor_shape = 2
 size_flags_horizontal = 3
 text = "+90"
 
-[node name="SmearOptions" type="VBoxContainer" parent="VBoxContainer" index="9"]
+[node name="SmearOptions" type="VBoxContainer" parent="VBoxContainer" index="10"]
 visible = false
 margin_top = 352.0
 margin_right = 326.0
@@ -194,37 +194,20 @@ prefix = "Initial angle:"
 suffix = "°"
 snap_step = 45.0
 
-[node name="HSeparator3" type="HSeparator" parent="VBoxContainer" index="10"]
-margin_top = 380.0
-margin_right = 278.0
-margin_bottom = 384.0
+[node name="HSeparator3" type="HSeparator" parent="VBoxContainer" index="11"]
+margin_top = 376.0
+margin_right = 360.0
+margin_bottom = 380.0
 
-[node name="OptionsContainer" parent="VBoxContainer" index="11"]
-margin_top = 388.0
-margin_right = 278.0
-margin_bottom = 412.0
-
-[node name="AffectOptionButton" parent="VBoxContainer/OptionsContainer" index="1"]
-margin_right = 278.0
-items = [ "Selected cels", null, false, 0, null, "Current frame", null, false, 1, null, "All frames", null, false, 2, null, "All projects", null, false, 3, null ]
-
-[node name="AnimationOptions" parent="VBoxContainer" index="12"]
-margin_top = 416.0
-margin_right = 278.0
-margin_bottom = 450.0
-
-[node name="PanelContainer" parent="VBoxContainer/AnimationOptions" index="1"]
-margin_right = 157.0
-
-[node name="AnimateMenu" parent="VBoxContainer/AnimationOptions/PanelContainer" index="0"]
-margin_right = 88.0
-
-[node name="InitalButton" parent="VBoxContainer/AnimationOptions" index="2"]
-margin_left = 161.0
-margin_right = 278.0
+[node name="OptionsContainer" parent="VBoxContainer" index="12"]
+margin_top = 384.0
+margin_bottom = 408.0
 
 [node name="WaitApply" type="Timer" parent="." index="4"]
 
+[node name="AnimateDialog" parent="." index="5"]
+margin_bottom = 416.0
+
 [connection signal="draw" from="VBoxContainer/AspectRatioContainer/Indicator" to="." method="_on_Indicator_draw"]
 [connection signal="gui_input" from="VBoxContainer/AspectRatioContainer/Indicator" to="." method="_on_Indicator_gui_input"]
 [connection signal="toggled" from="VBoxContainer/LiveSettings/LiveCheckbox" to="." method="_on_LiveCheckbox_toggled"]
diff --git a/src/UI/Nodes/AnimatePanel.gd b/src/UI/Nodes/AnimatePanel.gd
new file mode 100644
index 000000000..2b041513e
--- /dev/null
+++ b/src/UI/Nodes/AnimatePanel.gd
@@ -0,0 +1,165 @@
+class_name AnimatePanel
+extends PanelContainer
+
+var image_effect_node: ConfirmationDialog
+var frames := []  # Set this value before calling "get_animated_values"
+var properties := []  # Contains dictionary of properties
+var resetter_values := []  # Contains the Original properties without any change
+var _current_id: int = 0  # The property currently selected in "property_list"
+
+onready var can_animate_button: CheckBox = $"%CanAnimate"
+onready var property_list: ItemList = $"%PropertyList"
+onready var initial_value: ValueSlider = $"%Initial"
+onready var final_value: ValueSlider = $"%Final"
+onready var preview_slider: TextureProgress = $"%PreviewSlider"
+
+
+func _ready() -> void:
+	_populate_ease_type()
+	_populate_transition_type()
+	$"%Options".visible = false
+
+
+func re_calibrate_preview_slider():
+	preview_slider.visible = false
+	preview_slider.max_value = frames[-1] + 1
+	preview_slider.min_value = frames[0] + 1
+	preview_slider.value = image_effect_node.commit_idx + 1
+	preview_slider.visible = true
+
+
+func add_float_property(name: String, property_node: Range):
+	var info = {
+		"range_node": property_node,
+		"can_animate": false,
+		"initial_value": property_node.value,
+		"transition_type": Tween.TRANS_LINEAR,
+		"ease_type": Tween.EASE_IN,
+	}
+	properties.append(info)
+	resetter_values.append(property_node.value)
+	property_list.add_item(name)
+	property_node.connect("value_changed", self, "_on_range_node_value_changed")
+
+
+func get_animated_values(frame_idx: int, property_idx := 0) -> float:
+	var tween = SceneTreeTween.new()
+	if property_idx <= 0 or property_idx < properties.size():
+		if frame_idx in frames:
+			if properties[property_idx]["can_animate"] and frames.size() > 1:
+				var duration = frames.size() - 1
+				var elapsed = frames.find(frame_idx)
+				var initial = properties[property_idx]["initial_value"]
+				var delta = properties[property_idx]["range_node"].value - initial
+				var transition_type = properties[property_idx]["transition_type"]
+				var ease_type = properties[property_idx]["ease_type"]
+				return tween.interpolate_value(
+					initial, delta, elapsed, duration, transition_type, ease_type
+				)
+			else:
+				return properties[property_idx]["range_node"].value
+		else:
+			return resetter_values[property_idx]
+	else:
+		printerr("something is wrong")
+		return 0.0
+
+
+func _on_Initial_value_changed(value) -> void:
+	properties[_current_id]["initial_value"] = value
+	image_effect_node.update_preview()
+
+
+func _on_Final_value_changed(value: float) -> void:
+	if properties[_current_id]["range_node"].value != value:
+		properties[_current_id]["range_node"].value = value
+
+
+func _on_range_node_value_changed(_value) -> void:
+	# Value is changed from outside the Animate Panel
+	if properties[_current_id]["range_node"].value != final_value.value:
+		if final_value.is_connected("value_changed", self, "_on_Final_value_changed"):
+			final_value.disconnect("value_changed", self, "_on_Final_value_changed")
+		final_value.value = properties[_current_id]["range_node"].value
+		final_value.connect("value_changed", self, "_on_Final_value_changed")
+
+
+func _on_CanAnimate_toggled(button_pressed: bool) -> void:
+	properties[_current_id]["can_animate"] = button_pressed
+	$"%Initial".editable = button_pressed
+	$"%Final".editable = button_pressed
+	$"%EaseType".disabled = !button_pressed
+	$"%TransitionType".disabled = !button_pressed
+	image_effect_node.update_preview()
+
+
+func _on_PropertyList_item_selected(index: int) -> void:
+	_current_id = index
+	if not $"%Options".visible:
+		$"%Options".visible = true
+	$"%Options".visible = true
+	_refresh_properties(_current_id)
+
+
+func _refresh_properties(idx: int):
+	if initial_value.is_connected("value_changed", self, "_on_Initial_value_changed"):
+		initial_value.disconnect("value_changed", self, "_on_Initial_value_changed")
+	if final_value.is_connected("value_changed", self, "_on_Final_value_changed"):
+		final_value.disconnect("value_changed", self, "_on_Final_value_changed")
+
+	# nodes setup
+	var property_node = properties[idx]["range_node"]
+	if property_node is ValueSlider:
+		final_value.snap_step = property_node.snap_step
+		initial_value.snap_step = property_node.snap_step
+	final_value.max_value = property_node.max_value
+	final_value.min_value = property_node.min_value
+	final_value.step = property_node.step
+	initial_value.max_value = property_node.max_value
+	initial_value.min_value = property_node.min_value
+	initial_value.step = property_node.step
+
+	# now update values
+	can_animate_button.pressed = properties[idx]["can_animate"]
+	initial_value.value = properties[idx]["initial_value"]
+	if properties[idx]["range_node"].value != final_value.value:
+		final_value.value = properties[idx]["range_node"].value
+	$"%Name".text = property_list.get_item_text(idx)
+
+	initial_value.connect("value_changed", self, "_on_Initial_value_changed")
+	final_value.connect("value_changed", self, "_on_Final_value_changed")
+
+
+func _populate_ease_type():
+	$"%EaseType".add_item("Start slowly and speeds up towards the end", Tween.EASE_IN)
+	$"%EaseType".add_item("Starts quickly and slows down towards the end.", Tween.EASE_OUT)
+	$"%EaseType".add_item("Slowest at both ends fast at middle", Tween.EASE_IN_OUT)
+	$"%EaseType".add_item("Fast at both ends slow at middle", Tween.EASE_OUT_IN)
+
+
+func _populate_transition_type():
+	$"%TransitionType".add_item("Linear", Tween.TRANS_LINEAR)
+	$"%TransitionType".add_item("Quadratic (to the power of 2)", Tween.TRANS_QUAD)
+	$"%TransitionType".add_item("Cubic (to the power of 3)", Tween.TRANS_CUBIC)
+	$"%TransitionType".add_item("Quartic (to the power of 4)", Tween.TRANS_QUART)
+	$"%TransitionType".add_item("Quintic (to the power of 5)", Tween.TRANS_QUINT)
+	$"%TransitionType".add_item("Exponential (to the power of x)", Tween.TRANS_EXPO)
+	$"%TransitionType".add_item("Square Root", Tween.TRANS_CIRC)
+	$"%TransitionType".add_item("Sine", Tween.TRANS_SINE)
+	$"%TransitionType".add_item("Wiggling around the edges", Tween.TRANS_ELASTIC)
+	$"%TransitionType".add_item("Bouncing at the end", Tween.TRANS_BOUNCE)
+	$"%TransitionType".add_item("Backing out at ends", Tween.TRANS_BACK)
+
+
+func _on_EaseType_item_selected(index: int) -> void:
+	properties[_current_id]["ease_type"] = $"%EaseType".get_item_id(index)
+	image_effect_node.update_preview()
+
+
+func _on_TransitionType_item_selected(index: int) -> void:
+	properties[_current_id]["transition_type"] = $"%TransitionType".get_item_id(index)
+	image_effect_node.update_preview()
+
+
+func _on_PreviewSlider_value_changed(value: float) -> void:
+	image_effect_node.set_and_update_preview_image(value - 1)
diff --git a/src/UI/Nodes/AnimatePanel.tscn b/src/UI/Nodes/AnimatePanel.tscn
new file mode 100644
index 000000000..c94caa67a
--- /dev/null
+++ b/src/UI/Nodes/AnimatePanel.tscn
@@ -0,0 +1,156 @@
+[gd_scene load_steps=3 format=2]
+
+[ext_resource path="res://src/UI/Nodes/AnimatePanel.gd" type="Script" id=1]
+[ext_resource path="res://src/UI/Nodes/ValueSlider.tscn" type="PackedScene" id=2]
+
+[node name="AnimatePanel" type="PanelContainer"]
+margin_right = 360.0
+margin_bottom = 226.0
+script = ExtResource( 1 )
+
+[node name="VBoxContainer" type="VBoxContainer" parent="."]
+margin_left = 7.0
+margin_top = 7.0
+margin_right = 353.0
+margin_bottom = 219.0
+
+[node name="TopOptions" type="HBoxContainer" parent="VBoxContainer"]
+margin_right = 346.0
+margin_bottom = 24.0
+
+[node name="Label" type="Label" parent="VBoxContainer/TopOptions"]
+margin_top = 5.0
+margin_right = 143.0
+margin_bottom = 19.0
+theme_type_variation = "Header"
+text = "Animatable Properties"
+
+[node name="PreviewSlider" parent="VBoxContainer/TopOptions" instance=ExtResource( 2 )]
+unique_name_in_owner = true
+margin_left = 147.0
+margin_right = 346.0
+min_value = 1.0
+max_value = 1.0
+value = 1.0
+prefix = "Preview Frame:"
+
+[node name="HBoxContainer" type="HBoxContainer" parent="VBoxContainer"]
+margin_top = 28.0
+margin_right = 346.0
+margin_bottom = 212.0
+size_flags_vertical = 3
+
+[node name="PropertyList" type="ItemList" parent="VBoxContainer/HBoxContainer"]
+unique_name_in_owner = true
+margin_right = 100.0
+margin_bottom = 184.0
+rect_min_size = Vector2( 100, 0 )
+
+[node name="Options" type="VBoxContainer" parent="VBoxContainer/HBoxContainer"]
+unique_name_in_owner = true
+visible = false
+margin_left = 104.0
+margin_right = 346.0
+margin_bottom = 194.0
+size_flags_horizontal = 3
+
+[node name="HBoxContainer" type="HBoxContainer" parent="VBoxContainer/HBoxContainer/Options"]
+margin_right = 40.0
+margin_bottom = 40.0
+
+[node name="Name" type="Label" parent="VBoxContainer/HBoxContainer/Options/HBoxContainer"]
+unique_name_in_owner = true
+margin_right = 242.0
+margin_bottom = 14.0
+theme_type_variation = "Header"
+
+[node name="HSeparator" type="HSeparator" parent="VBoxContainer/HBoxContainer/Options/HBoxContainer"]
+margin_right = 40.0
+margin_bottom = 4.0
+size_flags_horizontal = 3
+
+[node name="CanAnimate" type="CheckBox" parent="VBoxContainer/HBoxContainer/Options"]
+unique_name_in_owner = true
+margin_left = 108.0
+margin_top = 18.0
+margin_right = 242.0
+margin_bottom = 58.0
+size_flags_horizontal = 8
+text = "Animate"
+
+[node name="Values" type="GridContainer" parent="VBoxContainer/HBoxContainer/Options"]
+margin_top = 62.0
+margin_right = 242.0
+margin_bottom = 162.0
+columns = 2
+
+[node name="Label" type="Label" parent="VBoxContainer/HBoxContainer/Options/Values"]
+margin_top = 5.0
+margin_right = 80.0
+margin_bottom = 19.0
+text = "Initial Value:"
+align = 2
+
+[node name="Initial" parent="VBoxContainer/HBoxContainer/Options/Values" instance=ExtResource( 2 )]
+unique_name_in_owner = true
+margin_left = 84.0
+margin_right = 242.0
+editable = false
+
+[node name="Label2" type="Label" parent="VBoxContainer/HBoxContainer/Options/Values"]
+margin_top = 33.0
+margin_right = 80.0
+margin_bottom = 47.0
+text = "Final Value: "
+align = 2
+
+[node name="Final" parent="VBoxContainer/HBoxContainer/Options/Values" instance=ExtResource( 2 )]
+unique_name_in_owner = true
+margin_left = 84.0
+margin_top = 28.0
+margin_right = 242.0
+margin_bottom = 52.0
+editable = false
+
+[node name="Label4" type="Label" parent="VBoxContainer/HBoxContainer/Options/Values"]
+margin_top = 59.0
+margin_right = 80.0
+margin_bottom = 73.0
+text = "Ease Type:"
+align = 2
+
+[node name="EaseType" type="OptionButton" parent="VBoxContainer/HBoxContainer/Options/Values"]
+unique_name_in_owner = true
+margin_left = 84.0
+margin_top = 56.0
+margin_right = 242.0
+margin_bottom = 76.0
+size_flags_vertical = 4
+disabled = true
+clip_text = true
+
+[node name="Label5" type="Label" parent="VBoxContainer/HBoxContainer/Options/Values"]
+margin_top = 83.0
+margin_right = 80.0
+margin_bottom = 97.0
+text = "Interpolate :"
+align = 2
+
+[node name="TransitionType" type="OptionButton" parent="VBoxContainer/HBoxContainer/Options/Values"]
+unique_name_in_owner = true
+margin_left = 84.0
+margin_top = 80.0
+margin_right = 242.0
+margin_bottom = 100.0
+hint_tooltip = "How the value changes while moving from initial to final value"
+size_flags_vertical = 4
+disabled = true
+clip_text = true
+
+[connection signal="value_changed" from="VBoxContainer/TopOptions/PreviewSlider" to="." method="_on_PreviewSlider_value_changed"]
+[connection signal="item_selected" from="VBoxContainer/HBoxContainer/PropertyList" to="." method="_on_PropertyList_item_selected"]
+[connection signal="toggled" from="VBoxContainer/HBoxContainer/Options/CanAnimate" to="." method="_on_CanAnimate_toggled"]
+[connection signal="value_changed" from="VBoxContainer/HBoxContainer/Options/Values/Initial" to="." method="_on_Initial_value_changed"]
+[connection signal="value_changed" from="VBoxContainer/HBoxContainer/Options/Values/Final" to="." method="_on_Final_value_changed"]
+[connection signal="item_selected" from="VBoxContainer/HBoxContainer/Options/Values/EaseType" to="." method="_on_EaseType_item_selected"]
+[connection signal="item_selected" from="VBoxContainer/HBoxContainer/Options/Values/TransitionType" to="." method="_on_TransitionType_item_selected"]