diff --git a/package.json b/package.json
index 3a642ae4..a39d43e9 100644
--- a/package.json
+++ b/package.json
@@ -48,5 +48,5 @@
         "preview:https": "serve dist",
         "reinstall": "rm -rf node_modules; yarn; vue-tsc --noEmit"
     },
-    "version": "5.0.0-alpha.251"
+    "version": "5.0.0-alpha.252"
 }
diff --git a/src/components/units/GameBody/CustomGUIQuarto.vue b/src/components/units/GameBody/CustomGUIQuarto.vue
index c74056b7..c89ff3a4 100644
--- a/src/components/units/GameBody/CustomGUIQuarto.vue
+++ b/src/components/units/GameBody/CustomGUIQuarto.vue
@@ -114,7 +114,6 @@
 
 <script lang="ts" setup>
     import { computed } from "vue";
-    import gsap from "gsap";
     import { actionTypes, useStore } from "../../../scripts/plugins/store";
 
     interface GDefaultRegular2DMove {
@@ -143,9 +142,6 @@
         const matches = currentPosition.value.match(/^R_(A|B)_([0-9]+)_([0-9]+)_([a-zA-Z0-9-\*]+)*/)!;
         const validRichPosition = matches && matches.length >= 5 && matches[4].length == 17;
         if (validRichPosition) {
-            if (document.getElementById("toPlace")) {
-                gsap.set("#toPlace", {x: 58, y: 113});
-            }
             const turn = matches[1];
             const board = matches[4].substring(0, 16);
             let tokens: GDefaultRegular2DBoardToken[] = [];
diff --git a/src/components/units/GameBody/ImageAutoGUI.vue b/src/components/units/GameBody/ImageAutoGUI.vue
index 30ed4919..e3f7101a 100644
--- a/src/components/units/GameBody/ImageAutoGUI.vue
+++ b/src/components/units/GameBody/ImageAutoGUI.vue
@@ -24,11 +24,10 @@
 
     <!-- Draw Pieces. -->
     <g v-for="(cell, i) in richPositionData.board" :key="'cell' + i">
-      <image v-if="cell != '-' && Object.keys(pieces).includes(cell)"
+      <image class="entity" v-if="cell != '-' && Object.keys(pieces).includes(cell)"
         :id="'piece' + i"
         :x="centers[i][0] - 0.5 * pieces[cell].scale * widthFactor"
         :y="centers[i][1] - 0.5 * pieces[cell].scale * widthFactor"
-        :class="'entity'"
         :width="pieces[cell].scale * widthFactor"
         :height="pieces[cell].scale * widthFactor"
         :href="getImageSource(pieces[cell].image)"/>
@@ -109,7 +108,6 @@
 <script lang="ts" setup>
   import { computed } from "vue";
   import { actionTypes, useStore } from "../../../scripts/plugins/store";
-  //import gsap from "gsap";
   const gimages = import.meta.globEager("../../../models/images/svg/**/*");
 
   interface GDefaultRegular2DMove {
@@ -169,12 +167,6 @@
     (theTheme.value.defaultMoveTokenRadius * widthFactor.value) || 2);
   const piecesOverArrows = computed(() => theTheme.value.piecesOverArrows || false);
 
-  // gsap.config({ nullTargetWarn: false }); // Suppress target-not-found warnings.
-  // const origOpacity = computed(() => {
-  //   gsap.to(".entity", {duration: 0.001, opacity: 1});
-  //   return currentPosition.value ? 1 : 1;
-  // });
-
   /* End Code Cleanup Required Here */
 
   const richPositionData = computed(() => {
diff --git a/src/models/sounds/Bee1.mp3 b/src/models/sounds/Bee1.mp3
new file mode 100644
index 00000000..bc437c48
Binary files /dev/null and b/src/models/sounds/Bee1.mp3 differ
diff --git a/src/models/sounds/Bee2.mp3 b/src/models/sounds/Bee2.mp3
new file mode 100644
index 00000000..f5829bbb
Binary files /dev/null and b/src/models/sounds/Bee2.mp3 differ
diff --git a/src/models/sounds/Bunny.mp3 b/src/models/sounds/Bunny.mp3
new file mode 100644
index 00000000..5cc13e2d
Binary files /dev/null and b/src/models/sounds/Bunny.mp3 differ
diff --git a/src/models/sounds/Dragon.mp3 b/src/models/sounds/Dragon.mp3
new file mode 100644
index 00000000..b9cbea48
Binary files /dev/null and b/src/models/sounds/Dragon.mp3 differ
diff --git a/src/models/sounds/GeneralSlide.mp3 b/src/models/sounds/GeneralSlide.mp3
new file mode 100644
index 00000000..d11aed49
Binary files /dev/null and b/src/models/sounds/GeneralSlide.mp3 differ
diff --git a/src/models/sounds/Goat.mp3 b/src/models/sounds/Goat.mp3
new file mode 100644
index 00000000..3add3d2b
Binary files /dev/null and b/src/models/sounds/Goat.mp3 differ
diff --git a/src/models/sounds/Snake1.mp3 b/src/models/sounds/Snake1.mp3
new file mode 100644
index 00000000..23a1ac26
Binary files /dev/null and b/src/models/sounds/Snake1.mp3 differ
diff --git a/src/models/sounds/Snake2.mp3 b/src/models/sounds/Snake2.mp3
new file mode 100644
index 00000000..29c563fa
Binary files /dev/null and b/src/models/sounds/Snake2.mp3 differ
diff --git a/src/models/sounds/Swan.mp3 b/src/models/sounds/Swan.mp3
new file mode 100644
index 00000000..4cab97f7
Binary files /dev/null and b/src/models/sounds/Swan.mp3 differ
diff --git a/src/models/sounds/Tiger.mp3 b/src/models/sounds/Tiger.mp3
new file mode 100644
index 00000000..521975cd
Binary files /dev/null and b/src/models/sounds/Tiger.mp3 differ
diff --git a/src/scripts/gamesmanUni/index.ts b/src/scripts/gamesmanUni/index.ts
index c0009bbd..8230c324 100644
--- a/src/scripts/gamesmanUni/index.ts
+++ b/src/scripts/gamesmanUni/index.ts
@@ -3,7 +3,7 @@ import * as GCTAPITypes from "../apis/gamesCrafters/types";
 import * as GHAPI from "../apis/gitHub";
 import type * as Types from "./types";
 import * as Defaults from "../../models/datas/defaultApp";
-import { handleMoveAnimation } from "./moveAnimation"
+import { handleMoveAnimation, animationEpilogue } from "./moveAnimation"
 const moveHistoryDelim = ':';
 
 const deepcopy = (obj: Object) => {
@@ -358,6 +358,7 @@ export const runMove = async (app: Types.App, payload: { move: string }) => {
     };
     await new Promise(r => setTimeout(r, animationDuration));
     app.currentMatch.animationPlaying = false;
+    animationEpilogue(app.currentMatch);
     app.currentMatch.moveHistory += moveHistoryDelim + (moveObj.moveName ? moveObj.moveName : moveObj.move);
     let posArr = updatedPosition.position.split('_');
     if (posArr.length === 5 && posArr[0] === 'R') {
diff --git a/src/scripts/gamesmanUni/moveAnimation.ts b/src/scripts/gamesmanUni/moveAnimation.ts
index 914f24ef..159c7315 100644
--- a/src/scripts/gamesmanUni/moveAnimation.ts
+++ b/src/scripts/gamesmanUni/moveAnimation.ts
@@ -1,6 +1,15 @@
 import type * as Types from "./types";
 import gsap from "gsap";
 const sfx = import.meta.globEager("../../models/sounds/*");
+import { computed } from "vue";
+import { useStore } from "../../scripts/plugins/store";
+const gimages = import.meta.globEager("../../models/images/svg/**/*");
+
+const playAudio = (path: string, volume: number) => {
+    var audio = new Audio(sfx['../../models/sounds/' + path].default);
+    audio.volume = volume;
+    audio.play();
+}
 
 /* All animation functions should return the animation duration in milliseconds. */
 const animateTTT = (volume: number, moveObj: Types.Move): number => {
@@ -8,17 +17,12 @@ const animateTTT = (volume: number, moveObj: Types.Move): number => {
     const turn = moveObj.move[2];
     const xOff = (diffIdx % 3) * 22;
     const yOff = Math.floor(diffIdx / 3) * 22;
-    var audio;
     if (turn === 'x') {
-        audio = new Audio(sfx['../../models/sounds/X.mp3'].default);
-        audio.volume = volume;
-        audio.play();
+        playAudio('X.mp3', volume);
         gsap.to("#xa" + diffIdx, {duration: 0.25, attr: {x2: 19 + xOff, y2: 19 + yOff}});
         gsap.to("#xb" + diffIdx, {delay: 0.25, duration: 0.25, attr: {x2: 3 + xOff, y2: 19 + yOff}});
     } else if (turn === 'o') {
-        audio = new Audio(sfx['../../models/sounds/O.mp3'].default);
-        audio.volume = volume;
-        audio.play();
+        playAudio('O.mp3', volume);
         gsap.to("#o" + diffIdx, {duration: 0.5, attr: {"stroke-dashoffset": 0}})
     }
     return 500;
@@ -26,9 +30,7 @@ const animateTTT = (volume: number, moveObj: Types.Move): number => {
 
 const animateSim = (volume: number, moveObj: Types.Move): number => {
     const vertices = [[4, 0], [2, 3.4641], [-2, 3.4641], [-4, 0], [-2, -3.4641], [2, -3.4641]];
-    var audio = new Audio(sfx['../../models/sounds/O.mp3'].default);
-    audio.volume = volume;
-    audio.play();
+    playAudio('O.mp3', volume);
     const d = Number(moveObj.moveName[1]) - 1;    
     gsap.to("#simline" + moveObj.moveName, {duration: 0.5, attr: {"x2": vertices[d][0], "y2": vertices[d][1]}});
     return 500;
@@ -48,14 +50,28 @@ const animateQuarto = (volume: number, currPosition: string, nextPosition: strin
     return 500;
 }
 
-const animateImageAutoGUI = (volume: number, animationType: string, currPosition: string, nextPosition: string): number => {
+const animateImageAutoGUI = (volume: number, currPosition: string, nextPosition: string, moveObj: Types.Move): number => {
+    const store = useStore();
+    const autoguiV2Data = computed(() => store.getters.autoguiV2Data(store.getters.currentGameType, 
+        store.getters.currentGameId, store.getters.currentVariantId));
+    const currentTheme = computed(() => store.getters.currentGameTheme);
+    const theTheme = computed(() => autoguiV2Data.value.themes[currentTheme.value]);
+    const scaledWidth = 100;
+    const backgroundGeometry = computed(() => theTheme.value.backgroundGeometry);
+    const widthFactor = computed(() => scaledWidth / backgroundGeometry.value[0]);
+    const animationType = computed(() => theTheme.value.animationType || "");
+    const pieces = computed(() => theTheme.value.pieces);
+    const centers = computed(() => theTheme.value.centers.map((a: [number, number]) =>
+        a.map((b: number) => b * widthFactor.value)));
+    const getImageSource = (imagePath: string) => gimages["../../models/images/svg/" + imagePath].default;
+    
     const currBoard = currPosition.split("_")[4];
     const nextBoard = nextPosition.split("_")[4];
     if (currBoard.length != nextBoard.length) return 0;
     var diffIdxs = [];
     var i, j;
 
-    if (animationType === "simpleSlidePlaceRemove") {
+    if (animationType.value === "simpleSlidePlaceRemove") {
         var fromIdx = null;
         var toIdx = null;
         var appearDisappearIdx = null;
@@ -71,6 +87,7 @@ const animateImageAutoGUI = (volume: number, animationType: string, currPosition
                 appearing = false;
             } else if (currBoard[i] == '-') { // Placement (fade-in)
                 appearing = true;
+                toIdx = i;
             } else {
                 return 0;
             }
@@ -124,20 +141,32 @@ const animateImageAutoGUI = (volume: number, animationType: string, currPosition
         } else {
             return 0;
         }
-        
         if (fromIdx != null && toIdx != null) { // Play sliding animation
-            //const toCoords = centers.value[toIdx];
-            //const fromCoords = centers.value[fromIdx];
-            //gsap.to("#piece" + fromIdx, {duration: 0.5, x: toCoords[0] - fromCoords[0], y: toCoords[1] - fromCoords[1]});
+            const toCoords = centers.value[toIdx];
+            const fromCoords = centers.value[fromIdx];
+            gsap.to("#piece" + fromIdx, {duration: 0.5, x: toCoords[0] - fromCoords[0], y: toCoords[1] - fromCoords[1]});
         }
         
         // If `appearing` is null, don't play an appearing or disappearing animation
         if (appearing === false) { // Play disappearing animation
-            gsap.to("#piece" + appearDisappearIdx, {duration: 0.5, autoAlpha: 0.01});
-        } else if (appearing === true) { // Play appearing animation
-            console.log("appear");
+            // Opacity set to 0.001 and not 0 so that the element remains loaded
+            gsap.fromTo("#piece" + appearDisappearIdx, {autoAlpha: 1}, {duration: 0.5, autoAlpha: 0.001});
+        } else if (appearing === true && appearDisappearIdx != null) { // Play appearing animation
+            var appearingChar = nextBoard[appearDisappearIdx];
+            var svg = document.getElementById('image-autogui'); //Get svg element
+            var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'image'); //Create a path in SVG's namespace
+            newElement.setAttribute("id", "appearingPiece");
+            newElement.setAttribute("x", (centers.value[appearDisappearIdx][0] - 0.5 * pieces.value[appearingChar].scale * widthFactor.value).toString());
+            newElement.setAttribute("y", (centers.value[appearDisappearIdx][1] - 0.5 * pieces.value[appearingChar].scale * widthFactor.value).toString());
+            newElement.setAttribute("width", (pieces.value[appearingChar].scale * widthFactor.value).toString()); //Set path's data
+            newElement.setAttribute("height", (pieces.value[appearingChar].scale * widthFactor.value).toString()); //Set path's data
+            newElement.setAttribute("href", getImageSource(pieces.value[appearingChar].image));
+            newElement.setAttribute("opacity", (0.001).toString());
+            svg!.appendChild(newElement);
+            gsap.fromTo("#appearingPiece", {opacity: 0}, {duration: 0.5, opacity: 1});
         }
-    } else if (animationType === "custom") {
+        return 500;
+    } else if (animationType.value === "custom") {
         console.log("Custom");
     }
     return 0;
@@ -152,6 +181,36 @@ export const handleMoveAnimation = (volume: number, currentMatch: Types.Match, m
         return animateSim(volume, moveObj);
     } else if (currentMatch.gameId === 'quarto') {
         return animateQuarto(volume, currPosition, nextPosition, moveObj);
+    } else {
+        return animateImageAutoGUI(volume, currPosition, nextPosition, moveObj);
     }
     return 0;
+}
+
+/*
+    The purpose of this function is to reset any elements whose styles may have
+    changed due to a gsap action. For example, suppose a chess piece with ID
+    "piece0" captures another piece with ID "piece1". The default animation that
+    would have played is "piece0" sliding and "piece1" fading away. 
+    Then in the new position, that capturing piece's new ID would be "piece1". However,
+    "piece1" would still have opacity 0 due to the fadeaway. This function would set
+    "piece1" back to have opacity 1.
+*/
+export const animationEpilogue = (currentMatch: Types.Match) => {
+    if (currentMatch.gameId === 'ttt') {
+        return;
+    } else if (currentMatch.gameId === 'sim') {
+        return;
+    } else if (currentMatch.gameId === 'quarto') {
+        if (document.getElementById("toPlace")) {
+            gsap.set("#toPlace", {x: 58, y: 113});
+        }
+    } else {
+        // Note: gsap.set() is unreliable (only achieves the reset as intended
+        // 50% of the time for some reason) so we use fromTo instead 
+        gsap.to(".entity", {duration: 0.001, opacity: 1});
+        if (document.getElementById("appearingPiece")) {
+            document.getElementById("appearingPiece")?.remove();
+        }
+    }
 }
\ No newline at end of file