Fade Animation Issue in A-Frame VR Tour

Question

I'm working on a VR tour using A-Frame, and I'm encountering an issue with fade animations when transitioning between scenes. I want the element to fade and change to another scene when clicking on a hotspot. However, the fade animation doesn't seem to be working as expected.

Here is a simplified version of my code:

<a-sky id="panorama" src="static/images/pexel.jpg" cursor-listener cursor="rayOrigin: mouse" rotation="0 -90 0"></a-sky>

<!-- Other entities and camera setup -->

<a-entity id="hotspot-container"></a-entity>

<script>
  const data = [
    {
        id: "1",
        title: 'Drawing Room',
        attributes: {
            src: "static/images/pexel2.jpg",
            rotation: "0 -90 0",
        },
        hotpots: [
            { position: '1 1.5 -5', rotation: '0 45 0', info: 'Bed Room', sceneID: '2' },
            { position: '2 2 -4', rotation: '0 70 0', info: 'Kitchen Room', sceneID: '3' },
            { position: '2 3 -4', rotation: '0 70 0', info: 'Bed Room', sceneID: '2' }
        ],
    },
...
]

let aSky = document.getElementById("panorama");

function loadSceneData(item){
    // Clear previous hotspots before loading new ones
    clearHotspots();

    // Remove animation attribute from the sky element
    aSky.removeAttribute('animation');

    for (const key in item.attributes) {
        aSky.setAttribute(key, item.attributes[key]);
    }

    setTimeout(function(){
        // Reset camera zoom to its initial state
        if(aSky.sceneEl.camera){
            aSky.sceneEl.camera.zoom = 0.5;
            aSky.sceneEl.camera.updateProjectionMatrix();
        }
    }, 500)
}

AFRAME.registerComponent('cursor-listener', {
    init: function () {
        loadSceneData(data[0])

        // Hot-spot click
        const hotspot = this.el
        hotspot.addEventListener('click', function (event) {
            const hotspotPosition = event.detail.intersection.point;

            // Reset camera zoom to its initial state
            aSky.setAttribute("animation", {
                property: 'position',
                to: `${parseFloat(hotspotPosition.x)} ${parseFloat(hotspotPosition.y)} 200`,
                dur: 1000,
                easing: 'linear',
                loop: false
            })
            
            setTimeout(() => {
                console.log(event.detail.intersectedEl.attributes)

                const hotspotId = event.detail.intersectedEl.attributes.scene_id.value;
                let sceneObj = data.find((obj) => obj.id == hotspotId);
                loadSceneData(sceneObj);
            }, 1000); // Adjust the delay time as needed
        });
    }
});
</script>

I have tried removing animations, clearing existing animations on the element, and ensuring that deprecated elements like are not used. Despite these efforts, the fade animation is still not functioning as expected.

Any insights or suggestions on how to troubleshoot and resolve this fade animation issue in A-Frame would be greatly appreciated.

A-Frame Version: 1.5.0