html - setTimeout animation problem in Javascript

Question

I have created an animation (you will see this when the window is reloaded) after the completion of this animation another animation will start like the bees start coming out of the hive(by calling function createBeesFromGate()) and going inside the hive(by calling function createBees()) and I have given an inline function to demolish bees(by means of giving the opacity of 0) for some times bees move in and out fine but after 20 to 30 seconds, a honeybee will be stuck on the beehive gate and lose its clickability(means when I click its opacity becomes 0) So, what's going on and how do I fix that.

let siteInfo = document.querySelector(".site-info")
let beehivePiece = document.querySelectorAll(".beehive-piece");
let bees1 = document.querySelectorAll(".corr-p-1");
let bees2 = document.querySelectorAll(".corr-p-2");
let bees3 = document.querySelectorAll(".corr-p-3");
let bees4 = document.querySelectorAll(".corr-p-4");
let bees5 = document.querySelectorAll(".corr-p-5");
let bees6 = document.querySelectorAll(".corr-p-6");
let bees7 = document.querySelectorAll(".corr-p-7");
let beehiveGate = document.querySelector("#beehive-gate");
let gatekeeperBee = document.querySelector(".gate-keeper-bee");
let heroSvg = document.getElementById("hero-svg")

 console.log(heroSvg);
// console.log(gatekeeperBee)
// console.log(beehivePiece[1])

window.addEventListener("load",check)
function check(){
    siteInfo.classList.add("site-info-appear")
   setTimeout(()=>{
       beehivePiece[6].style="transform:translate(0px,0px)";
       bees1[0].style="transform:translate(0px,0px)";
       bees1[1].style="transform:translate(0px,0px)";
       setTimeout(()=>{
        bees1[0].style="transform:translate(1000px,250px)";
        bees1[1].style="transform:translate(1000px,250px)";
       },1300)
   },1500)

//  For BEES 2
   setTimeout(()=>{
    beehivePiece[5].style="transform:translate(0px,0px)";
    bees2[0].style="transform:translate(0px,0px)";
    bees2[1].style="transform:translate(0px,0px)";
    setTimeout(()=>{
     bees2[0].style="transform:translate(1000px,250px)";
     bees2[1].style="transform:translate(1000px,250px)";
    },1300)
},2500)

//  For BEES 3
setTimeout(()=>{
    beehivePiece[4].style="transform:translate(0px,0px)";
    bees3[0].style="transform:translate(0px,0px)";
    bees3[1].style="transform:translate(0px,0px)";
    setTimeout(()=>{
     bees3[0].style="transform:translate(1000px,250px)";
     bees3[1].style="transform:translate(1000px,250px)";
    },1300)
},3000)

//  For BEES 4
setTimeout(()=>{
    beehivePiece[3].style="transform:translate(0px,0px)";
    bees4[0].style="transform:translate(0px,0px)";
    bees4[1].style="transform:translate(0px,0px)";
    setTimeout(()=>{
     bees4[0].style="transform:translate(1000px,250px)";
     bees4[1].style="transform:translate(1000px,250px)";
    },1300)
},3500)

//  For BEES 5
setTimeout(()=>{
    beehivePiece[2].style="transform:translate(0px,0px)";
    bees5[0].style="transform:translate(0px,0px)";
    bees5[1].style="transform:translate(0px,0px)";
    setTimeout(()=>{
     bees5[0].style="transform:translate(1000px,250px)";
     bees5[1].style="transform:translate(1000px,250px)";
    },1300)
},4000)


//  For BEES 6
setTimeout(()=>{
    beehivePiece[1].style="transform:translate(0px,0px)";
    bees6[0].style="transform:translate(0px,0px)";
    bees6[1].style="transform:translate(0px,0px)";
    setTimeout(()=>{
     bees6[0].style="transform:translate(1000px,250px)";
     bees6[1].style="transform:translate(1000px,250px)";
    },1300)
},4500)

//  For BEES 7
setTimeout(()=>{
    beehivePiece[0].style="transform:translate(0px,0px)";
    bees7[0].style="transform:translate(0px,0px)";
    bees7[1].style="transform:translate(0px,0px)";
    setTimeout(()=>{
     bees7[0].style="transform:translate(1000px,250px)";
     bees7[1].style="transform:translate(1000px,250px)";
    },1300)
},5000)

 setTimeout(()=>{
     gatekeeperBee.style="transform:translate(0px,0px);"
        beehiveGate.style="transform:translate(0px,0px);"
      setTimeout(() => {
        gatekeeperBee.style="transform:translate(1000px,250px)";
        
    }, 2500);
 },6000)


}


function createBees(){
    
    setInterval(() => {
        setTimeout(()=>{
            
            console.log("bee created")
            let b = heroSvg.innerHTML +=  `<use xlink:href="#theBee" 
            class="newCreatedBee"  onclick="
            (
                function() {
                    document.querySelector('.newCreatedBee').style.opacity = 0;
                    document.querySelector('.newCreatedBee').style.transition = '0.5s';
                }
            )();"
            style="transform: translate(1000px,${Math.floor(Math.random() * (300 - 10) +1  ) + 10}px);"
             width="400" height="38.4" x="-30" y="290" />
             `
            
            let newBee = heroSvg.querySelector(".newCreatedBee")
              setTimeout(() => {
                newBee.style="transform: translate(0px,30px);"
                newBee.addEventListener("transitionend",function(){
                  console.log("transition completed")
                  heroSvg.removeChild(heroSvg.lastElementChild)
                })
              }, 1000);
        },1000)    
    }, Math.floor(Math.random() * (50000 - 5000) +1  ) + 5000 );

      
    

}
createBees()

function createBeesFromGate(){
    setInterval(() => {
        console.log("Bees created from the gate");
        setTimeout(()=>{
            let b = heroSvg.innerHTML +=  `<use xlink:href="#theBee" 
            class="newCreatedBeeComingFromHive" onclick="
            (
                function() {
                    document.querySelector('.newCreatedBeeComingFromHive').style.opacity = 0;
                    document.querySelector('.newCreatedBeeComingFromHive').style.transition = '0.5s';
                }
            )();"
            style="transform: translate(0px,30px);"
             width="400" height="38.4" x="-30" y="290" />
             `
             
            let newBee = heroSvg.querySelector(".newCreatedBeeComingFromHive")
        // function remove(el) {
        //     var element = el;
        //     element.remove();
        //   }
              setTimeout(() => {
                newBee.style.transform = ` translate(-1000px,300px)`
                newBee.addEventListener("transitionend",function(){
                  console.log("transition completed")
                  heroSvg.removeChild(heroSvg.lastElementChild)
                })
                
              }, 1000);
        },1000)    
    }, Math.floor(Math.random() * (50000 - 11000) +1  ) + 11000 );

      
    
}
createBeesFromGate()

/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'); */

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}
/* html{
     border:5px solid blue;
} */
*,::before,::after{
 margin:0;
 padding:0;
 box-sizing: border-box;   
}
body{
    font-family:Roboto ;
    /* border: 3px solid red; */
    /* position: fixed; */
    /* position: absolute; */
    /* width:100%; */
}
.container{
    /* border:2px solid black;   */
    /* padding:10px; */
   width:100%;
}
.header{
    /* border:2px solid rgb(255, 179, 0); */
    width:100%;
    padding:.5em .5em;
}
.header-wrapper{
    display:flex;
    align-items: center;
    justify-content:space-between;
    padding:.8em 0em;
    /* border:2px solid blue; */
    width:90%;
    margin:auto;
}
.site-title{
  /* border: 2px solid red; */
  margin-left: 2em;
  font-size:2.3em;
  font-weight:400;
    

}
.site-title-span{
    font-weight:750;
    color:#E47700;
}
.nav{
    /* border:2px solid magenta; */
    margin-right:2em;
    /* align-self: flex-end; */
    width:45%;
}
.nav ul{
 display: flex;
 list-style: none;
 font-size:1.5em;
 justify-content: space-between;
}
/* .nav ul li{
  margin-right:1.5em;
} */
.nav ul li a {
    text-decoration: none;
 color:black;
  font-weight: 500;
  padding:6px;
}
.nav ul li a:hover{
    color:white;
    background:#FEBD33;
    border-radius:50px;
    transition: .3s all ease;
}
/* GO AND DO IT IN JS */
.active{
    border-radius:50px;
    background-color: #FEBD33;
    color: white;
    padding:0 12px;
}
.hero{
    /* border:2px solid red; */
    height:36vh;
    /* height:100%;  for mobile view*/
    font-family: poppins;
    /* overflow: hidden; */
    
    
}
.hero-wrapper{
    /* border: 2px solid hotpink; */
    width:80%;
    margin:0 auto;
    margin-top:130px;
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /* flex-direction: column; */
    flex-shrink: 0; 
    align-items:center;


}
.site-info{
        /* position: relative;
        top: 155px;
        left: 10.9em; */
        display: inline-block;
        width: 25em;
        line-height: 28px;
        opacity: 0;
     transform: translateY(20px);
     transition:2.5s;
        /* border: 2px solid rebeccapurple; */
}
.site-info-appear{
    opacity: 1;
    transform: translateY(0px);

}

.site-info-heading{
    font-size:3em;
    /* border: 2px solid rebeccapurple; */

}
.site-info-text{
  font-size: 25px;
  font-weight: 600;
  margin-top: 6px;
  /* border: 2px solid rebeccapurple; */

}
.site-info-btn{
    font-size:1.3em;
    border-radius:50px;
    padding:.3em .5em;
    border:none;
    background-color: #33BC00;
    color:white;
    margin-top: 19px;
    cursor: pointer;
    /* border: 2px solid rebeccapurple; */

}
.hero-beehive{
     position: relative;
     top: 0px;
     left:0px;
    /* right: 1em;  */
    /* display:inline-block; */
    width:300px;
    height:300px;
    /* border: 2px solid rebeccapurple; */


}
svg{
    border:2px solid red;
     width:155%;
     height:25em;
     float:left;
     /* margin-left:0; */
    /* display:inline-block; */
    position:static;
    top:0px;
    left:0;
    /* background:burlywood; */
    /* overflow: hidden; */
    
    /* float: right; */

}
#b-peice-1,#b-peice-2,#b-peice-3
#b-peice-4,#b-peice-5,#b-peice-6,
#b-peice-7{
    transform:translateY(px);
    position:absolute;
}
.beehive-piece,.bee{
    transition: .7s ;

}
.gate-keeper-bee,#beehive-gate{
    transition: 2s ;

}
.newCreatedBee{
    transition: 8s linear all ;
    cursor:pointer;
}
.newCreatedBeeComingFromHive{
    transition: 8s linear;
    transform-origin:center;
    /* position:absolute; */
    /* transform: sc; */
}
.forest-container{
    background-image:url("forest 1.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center ;
    /* border:5px solid black; */
    width:100%;
    height:1050px;
}
.forest{
  border:2px solid red;
  width:100%;    
}

/* HONEY BEE WINGS FLYING ANIM */
#small-wing{
    /* anim`ation: small-wing 2s infinite alternate ; */
     animation: check .09s infinite alternate ;
     /* animation-name: check;
     animation-duration: 1s;
     animation-iteration-count: infinite; */
     /* transform: rotate(10deg); */
      
}
#large-wing{
    animation: check .09s infinite alternate ;
    
}
@keyframes check{
    0%{
    transform: rotate(0deg);
    }
    50%{
        transf

Answer 1

From just experimenting, I believe it has to do with the timing of your createBeesFromGate and createBees functions, as well as the timing of the CSS transtions .newCreatedBee and .newCreatedBeeComingFromHive. You're using random timing for the two functions and I noticed that sometimes your bee was not being removed from createBees and sometimes it was createBeesFromGate based on the random number generated. Playing with the CSS timings affected whether they could be removed before the function reset. I think that the bee gets stuck when the timing of these line up in a way that cause the bee not to be removed.