A-Frame: Adding animationClip from another glb to one that has no animation

Question

I have a gltf model without an animation that I've loaded in aframe, and I'd like to add an animation that is connected to a different model. I've written some javascript to pull in the animation data and even bind it to the original GLB using GLTF loader, but not sure how to replace the aframe entity beyond just replacing the url.

Any help on how to solve this, or if there's a more efficient way to do this would be much appreciated! 🙂

HTML code:

<a-entity gltf-model="https://cdn.theoasis.xyz/public/bollywoodified/01.glb" id="center" position="0 0.03 -1.6" rotation="0 0 0" scale="1.3 1.3 1.3" animation-mixer\>\</a-entity\>

Javascript code:

import { GLTFLoader } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/GLTFLoader.js';
getAnimations('https://cdn.theoasis.xyz/glb/djland.glb');

function getAnimations(glb) {
   const loader = new GLTFLoader();
   loader.load(glb, function ( gltf ) {
      loader.load(oasis_data.metadata[0].glb, function (data) {
         data.animations = gltf.animations;
      });
   });
}

I tried to pull the animationClip from another glb and was successful, and then was able to replace the animation array on the intended glb with the one from the animated glb. But I do not know how to actually update the entity within AFrame, nor do i know if this is the most efficient solution!