I am creating an animation (it will happen after the creation of the beehive) when the bee reaches the door of the beehive gate it has to become invisible by CSS display: none; for this, I am making a logic that when the transform: translate(0px,0px) the newCreatedBee(class of the newly created bee using SVG use tag in js) becomes zero it has to display: none; but the problem comes I have given transition:4s to the newly created bee (I have consoled bee reached when translate becomes zero) but before the bee reached the beehive gate it is consoling bee reached So, I think this weird behaviour is due to CSS transition property. So how do I console at the exact time when the bee reaches the gate with a smooth transition(but not with this weird problem).
can anyone tell why is happening?
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])
let a = 1500
window.addEventListener("load",check)
function check(){
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)
}
// THIS FUCNTION IS CREATING NEW BEE
function createBees(){
setTimeout(()=>{
let b = heroSvg.innerHTML += `<use xlink:href="#theBee"
class="newCreatedBee"
style="transform: translate(1000px,250px);"
width="400" height="38.4" x="-30" y="290" />
`
let newBee = heroSvg.querySelector(".newCreatedBee")
let xAxisOfBee = newBee.getBBox().x
setTimeout(() => {
if( newBee.style="transform: translate(0px,0px);"){
console.log("bee Reached")
}
}, 10000);
},10000)
}
createBees()/* @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:40vh;
/* 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;
/* border: 2px solid rebeccapurple; */
}
.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;
/* 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;
/* 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: 4s linear all ;
}
.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%{
transform: rotate(-.4deg);
}
100%{
transform: rotate(.4deg);
}
}
.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); */
transform-origin: center;
}
.large-wing{
animation: check .09s infinite alternate ;
transform-origin: center;
}
@keyframes check{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(-2.5deg);
transform-origin: center;
}
100%{
transform: rotate(2.5deg);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<!--header open-->
<div class="header-wrapper">
<div class="site-title">
<p>
<span class="site-title-span">B</span>ee
<span class="site-title-span">B</span>uzz
</p>
</div>
<div class="nav">
<ul>
<li><a href="#" class="active">HOME</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</div>
</div>
</div>
<!--header closed-->
<!-- HERO SECTION -->
<div class="hero">
<div class="hero-wrapper">
<div class="site-info">
<h1 class="site-info-heading">
<span style="color:#E47700;font-weight:bolder;">B</span>ee
<span style="color:#E47700;font-weight:bolder;">B</span>uzz
<span style="font-size:.5em;">TM</span>
</h1>
<p class="site-info-text">
We are providing pure
forest bee honey and
protecting our environment
</p>
<button class="site-info-btn">
Read more
</button>
</div>
<div class="hero-beehive">
<svg id="hero-svg" width="300" height="300" viewBox="0 50 630 630" fill="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="theBee" viewBox="0 0 78 49" >
<g id="complete_bee">
<path id="bee head" d="M11.553 35.5047C16.3904 38.8245 21.8681 37.8364 24.0023 36.4532V15.1115C22.9352 14.4397 19.5917 13.499 14.7542 15.1115C9.9168 16.724 8.37329 20.5655 7.99604 21.7512C6.88944 25.2291 6.71554 32.1848 11.553 35.5047Z" fill="#FFE818" stroke="black" />
<circle id="bee eye" cx="15.532" cy="21.6908" r="2.96412" fill="#313131" />
<path id="bee trunk" d="M65.8034 15.1697C45.3154 7.5816 30.1154 12.008 23.9501 15.1697V36.6299C37.3242 43.649 56.6739 38.0527 64.1435 34.3772C78.0156 27.5513 77.7785 19.6049 65.8034 15.1697Z" fill="#FFE818" stroke="black" />
<path id="trunk lines" d="M32.961 12.087C30.4711 16.1577 26.9142 26.5519 32.3682 39.3569L35.8065 39.8312C29.8309 27.5004 34.2652 15.5649 36.7551 11.4942L32.961 12.087Z" fill="#4E4E4E" stroke="black" />
<path id="trunk lines_2" d="M42.9204 39.8312C36.9447 27.5005 41.2605 15.0907 43.7503 11.02L47.7815 11.1385C45.2917 15.2092 40.5017 27.1448 46.4773 39.4755L42.9204 39.8312Z" fill="#313131" stroke="black" />
<path id="trunk lines_3" d="M53.947 38.0527C47.2667 27.313 51.8749 15.6325 54.6584 12.087L58.3339 12.7984C55.5504 16.3439 50.8236 26.246 57.504 36.9856L53.947 38.0527Z" fill="#313131" stroke="black" />
<path id="trunk lines_4" d="M63.7528 34.6143C56.6849 26.8661 61.298 16.5925 64.38 14.6955L67.5819 15.8811C65.3292 18.6081 61.4051 23.9435 66.3963 33.1916L63.7528 34.6143Z" fill="#313131" stroke="black" />
<path id="small-wing" d="M61.4166 1.06052C55.8203 0.206853 39.1659 8.60919 32.6053 12.0871C54.3264 11.3283 59.9938 9.00435 61.4166 8.05583C63.2303 6.8467 67.0128 1.91419 61.4166 1.06052Z" fill="#99CEFF" stroke="black" />
<path id="large-wing" d="M32.9609 11.9685C48.0977 7.26541 80.3166 -2.14073 74.6957 7.34446C68.7675 14.5769 44.3036 13.6679 32.9609 11.9685Z" fill="#81D1FE" stroke="black" />
<path id="bee sting" d="M70.4275 30.7017L73.273 27.7376L76 32.7173L70.4275 30.7017Z" fill="#313131" stroke="black" />
<path id="antenna" d="M13.1606 15.8811C13.4768 12.6008 12.1173 5.73197 4.14972 4.4989M10.3151 17.8967C9.36656 14.4583 6.09418 8.05584 0.592773 9.95288" stroke="black" />
<path id="bee legs" d="M30.3525 39.1198L26.2028 43.151L28.2184 46.2337M35.6879 39.9497L31.7753 44.5738L34.2652 48.605" stroke="black" />
<circle id="antenna ball" cx="4.38689" cy="4.38033" r="0.592824" fill="#FFE818" />
<circle id="antenna ball_2" cx="0.592824" cy="9.83431" r="0.592824" fill="#FFE818" />
<path id="bee behind legs" d="M49.2044 39.2384L45.6475 43.6253L47.6631 45.9965M55.4883 37.8156L50.8643 43.6253L55.4883 46.8265" stroke="black" />
</g>
</symbol>
<g id="beehive 1">
<g id="first-beehive-setm">
<path id="hive-stem"
d="M353 80C361.284 80 368 86.7157 368 95V97C368 105.284 361.284 112 353 112H15C6.71573 112 0 105.284 0 97V95C0 86.7157 6.71573 80 15 80H217.787C221.765 80 225.58 78.4196 228.393 75.6066L261.393 42.6066C267.251 36.7487 276.749 36.7487 282.607 42.6066L288.971 48.9706C292.853 52.8528 292.853 59.1472 288.971 63.0294C282.708 69.292 287.143 80 296 80H353Z"
fill="#502601" />
<path id="leaft-up"
d="M368 0L375.032 7.032C385.896 17.898 392 32.634 392 48C392 63.366 385.896 78.102 375.032 88.968L368 96L360.968 88.968C350.104 78.102 344 63.366 344 48C344 32.634 350.104 17.898 360.968 7.032L368 0Z"
fill="#008100" />
<path id="leaf-side"
d="M464 96L456.968 103.032C446.102 113.896 431.366 120 416 120C400.634 120 385.898 113.896 375.032 103.032L368 96L375.032 88.968C385.898 78.104 400.634 72 416 72C431.366 72 446.102 78.104 456.968 88.968L464 96Z"
fill="#33BC00" />
<path id="anchor" d="M152 112H184V160H152V112Z" fill="#763A02" />
</g>4
<g>
<!-- beehive piece -->
<path id="b-peice-7" class="beehive-piece" style="transform: translate(1000px,250px);"
d="M112 432H232C240.837 432 248 439.163 248 448C248 456.837 240.837 464 232 464H112C103.163 464 96 456.837 96 448C96 439.163 103.163 432 112 432Z"
fill="#E47700" />
<!-- beehive piece -->
<path id="b-peice-6" class="beehive-piece" style="transform: translate(1000px,250px);"
d="M72 384H272C285.255 384 296 394.745 296 408C296 421.255 285.255 432 272 432H72C58.745 432 48 421.255 48 408C48 394.745 58.745 384 72 384Z"
fill="#FF8800" />
<!-- beehive piece -->
<path id="b-peice-5" class="beehive-piece" style="transform: translate(1000px,250px);"
d="M40 336C143.098 336 200.902 336 304 336C317.255 336 328 346.745 328 360C328 373.255 317.255 384 304 384H40C26.745 384 16 373.255 16 360C16 346.745 26.745 336 40 336Z"
fill="#FFA900" />
<!-- beehive piece 4 -->
<path id="b-peice-4" class="beehive-piece" style="transform: translate(1000px,250px);"
d="M24 288H320C333.255 288 344 298.745 344 312C344 325.255 333.255 336 320 336H24C10.745 336 0 325.255 0 312C0 298.745 10.745 288 24 288Z"
fill="#FEBD33" />
<!-- beehive piece 3 -->
<path id="b-peice-3" class="beehive-piece" style="transform: translate(1000px,250px);"
d="M40 240H304C317.255 240 328 250.745 328 264C328 277.255 317.255 288 304 288H40C26.745 288 16 277.255 16 264C16 250.745 26.745 240 40 240Z"
fill="#FFA900" />
<!-- beehive piece 2 -->
<path id="b-peice-2" style="transform: translate(1000px,250px);"class="beehive-piece"
d="M72 192H272C285.255 192 296 202.745 296 216C296 229.255 285.255 240 272 240H72C58.745 240 48 229.255 48 216C48 202.745 58.745 192 72 192Z"
fill="#FF8800" />
<!-- beehive piece 1 -->
<path id="b-peice-1" class="beehive-piece" style="transform: translate(1000px,250px);"
d="M112 160H232C240.837 160 248 167.163 248 176C248 184.837 240.837 192 232 192H112C103.163 192 96 184.837 96 176C96 167.163 103.163 160 112 160Z"
fill="#E47700" />
<!-- beehive keeper -->
<path id="beehive-gate" style="transform: translate(1000px,250px);"
d="M136 384H200V352C200 334.327 185.673 320 168 320C150.327 320 136 334.327 136 352V384Z"
fill="#763A02" />
</g>
<!-- <use xlink:href="#theBee" width="62.4" height="38.4"/> -->
<!-- <use xlink:href="#theBee" width="62.4" height="38.4" x="344" y="288" /> -->
<!-- corresponding piece-1 -->
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-1 bee" width="62.4" height="38.4" x="80" y="155" />
<use xlink:href="#theBee" style="transform: translate(1000px,250px);"
class="corr-p-1 bee" width="62.4" height="38.4" x="220" y="155" />
<!-- corresponding piece-2 -->
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" width="62.4" height="38.4" class="corr-p-2 bee" x="25" y="195" />
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-2 bee" width="62.4" height="38.4" x="260" y="195" />
<!-- corresponding piece-3 -->
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-3 bee" width="62.4" height="38.4" x="-6" y="245" />
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-3 bee" width="62.4" height="38.4" x="290" y="245" />
<!-- corresponding piece-4 -->
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-4 bee" width="400" height="38.4" x="145" y="295" />
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-4 bee" width="400" height="38.4" x="-200" y="295" />
<!-- corresponding piece-5 -->
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-5 bee" width="400" height="38.4" x="135" y="345" />
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-5 bee" width="400" height="38.4" x="-180" y="345" />
<!-- corresponding piece-6 -->
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-6 bee" width="400" height="38.4" x="100" y="390" />
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-6 bee" width="400" height="38.4" x="-150" y="390" />
<!-- corresponding piece-7 -->
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-7 bee" width="400" height="38.4" x="50" y="435" />
<use xlink:href="#theBee" style="transform: translate(1000px,250px);" class="corr-p-7 bee" width="400" height="38.4" x="-100" y="435" />
<!-- gate keeper bee -->
<use xlink:href="#theBee"
class="gate-keeper-bee"
style="transform: translate(1000px,250px);"
width="400" height="38.4" x="-30" y="290" />
</svg>
</div>
</div>
</div>
<div class="forest-container">
<img src="Group.svg" style="width:100%;"
class="forest" alt="forest-vector">
</div>
<!--END OF THE CONTAINER-->
</div>
<script src="script.js"></script>
</body>
</html>