diff --git a/src/App.jsx b/src/App.jsx
index 6ec153d3..3b6142ff 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -92,7 +92,10 @@ async function fetchScene() {
 async function fetchAnimation(templateInfo) {
   // create an animation manager for all the traits that will be loaded
   const newAnimationManager = new AnimationManager(templateInfo.offset)
-  await newAnimationManager.loadAnimations(templateInfo.animationPath, templateInfo.animationPath.endsWith('.fbx'))
+  const animationPaths = getAsArray(templateInfo.animationPath);
+  newAnimationManager.storeAnimationPaths(animationPaths);
+  
+  await newAnimationManager.loadAnimation(animationPaths, animationPaths[0].endsWith('.fbx'))
   return newAnimationManager
 }
 
diff --git a/src/components/Editor.jsx b/src/components/Editor.jsx
index e7d019c6..51bd2158 100644
--- a/src/components/Editor.jsx
+++ b/src/components/Editor.jsx
@@ -115,7 +115,7 @@ export default function Editor({confirmDialog,animationManager, blinkManager, lo
         </div>
       </div>
       <Selector confirmDialog = {confirmDialog} animationManager={animationManager} templateInfo={templateInfo} blinkManager = {blinkManager} lookatManager = {lookatManager} effectManager = {effectManager}/>
-      <TraitInformation currentVRM={currentVRM}/>
+      <TraitInformation currentVRM={currentVRM} animationManager={animationManager}/>
     </Fragment>
   )
 }
diff --git a/src/components/TraitInformation.jsx b/src/components/TraitInformation.jsx
index 4bfadcb2..41c73ee1 100644
--- a/src/components/TraitInformation.jsx
+++ b/src/components/TraitInformation.jsx
@@ -5,7 +5,7 @@ import { SceneContext } from "../context/SceneContext";
 import Slider from "./Slider";
 import { cullHiddenMeshes } from "../library/utils";
 
-export default function TraitInformation({currentVRM}){
+export default function TraitInformation({currentVRM, animationManager}){
     const {
         displayTraitOption,
         avatar
@@ -48,6 +48,17 @@ export default function TraitInformation({currentVRM}){
         }
     };
 
+    const nextAnimation = () => {
+        animationManager.loadNextAnimation();
+        console.log(animationManager);
+        console.log("next")
+    }
+    const prevAnimation = () => {
+        animationManager.loadPreviousAnimation();
+        console.log(animationManager);
+        console.log("prev")
+    }
+
     return (
         displayTraitOption != null ? (
         <div>
@@ -105,9 +116,15 @@ export default function TraitInformation({currentVRM}){
                         </div>
                         <br/>
                         <div className={styles["animationSelect"]}>
-                            <button className={styles["traitInfoText"]}>1</button>
+                            <button 
+                                className={styles["traitInfoText"]}
+                                onClick={prevAnimation}
+                            >1</button>
                             <div className={styles["traitInfoText"]}>animation name</div>
-                            <button className={styles["traitInfoText"]}>1</button>
+                            <button 
+                                className={styles["traitInfoText"]}
+                                onClick={nextAnimation}
+                            >1</button>
                         </div>
                     </div>
 
diff --git a/src/library/animationManager.js b/src/library/animationManager.js
index 66990aa9..a8c5d16d 100644
--- a/src/library/animationManager.js
+++ b/src/library/animationManager.js
@@ -3,6 +3,7 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
 import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader"
 import { addModelData } from "./utils";
 import { getMixamoAnimation } from './loadMixamoAnimation';
+import { getAsArray } from './utils';
 
 // make a class that hold all the informarion
 const fbxLoader = new FBXLoader();
@@ -89,10 +90,13 @@ class AnimationControl {
 
 export class AnimationManager{
   constructor (offset){
+    this.animationPaths = null;
     this.lastAnimID = null;
     this.mainControl = null;
     this.animationControl  = null;
     this.animations = null;
+
+    this.curLoadAnim = 0;
     
     this.weightIn = NaN; // note: can't set null, because of check `null < 1` will result `true`.
     this.weightOut = NaN;
@@ -116,8 +120,11 @@ export class AnimationManager{
       this.update();
     }, 1000/30);
   }
+
+   
   
-  async loadAnimations(path, isfbx = true){
+  async loadAnimation(paths, isfbx = true){
+    const path = getAsArray(paths)[0];
     const loader = isfbx ? fbxLoader : gltfLoader;
     const animationModel = await loader.loadAsync(path);
     // if we have mixamo animations store the model
@@ -147,6 +154,26 @@ export class AnimationManager{
   
   }
 
+  storeAnimationPaths(pathArray){
+    this.animationPaths = getAsArray(pathArray);   
+  }
+  
+  loadNextAnimation(){
+    if (this.curLoadAnim == this.animationPaths.length-1)
+      this.curLoadAnim = 0;
+    else
+      this.curLoadAnim++;
+    this.loadAnimation(this.animationPaths[this.curLoadAnim])
+  }
+
+  loadPreviousAnimation(){
+    if (this.curLoadAnim == 0)
+      this.curLoadAnim = this.animationPaths.length-1;
+    else
+      this.curLoadAnim--;
+    this.loadAnimation(this.animationPaths[this.curLoadAnim])
+  }
+
   enableScreenshot() {
     this.animationControls.forEach(control => {
       control.reset()
diff --git a/src/pages/Appearance.jsx b/src/pages/Appearance.jsx
index c72c6727..58dd4780 100644
--- a/src/pages/Appearance.jsx
+++ b/src/pages/Appearance.jsx
@@ -81,7 +81,7 @@ function Appearance({
     if (file && file.name.toLowerCase().endsWith('.fbx')) {
       console.log('Dropped .fbx file:', file);
       const path = URL.createObjectURL(file);
-      animationManager.loadAnimations(path, true);
+      animationManager.loadAnimation(path, true);
       // Handle the dropped .fbx file
     } 
   };