setTimeout animation problem in Javascript - javascript

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%{
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>HOME</li>
<li>SERVICES</li>
<li>CONTACT</li>
<li>ABOUT</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>
<!-- 2ND SECTION FOREST -->
<div class="forest-container" >
<!-- <img src="Group.svg" style="width:100%;"
class="forest" alt="forest-vector"> -->
</div>
</div><!--END OF THE CONTAINER-->
<script src="script.js"></script>
</body>
</html>


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.

Related

Add a tick selected css

.showcase-components-colorlist color {
border: 2px solid transparent;
margin: 1px;
padding: 2px;
border-radius: 50%;
cursor: pointer;
}
<div class="showcase-components-colorlist color showcase-components-colorlist color-- active">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#c5145d" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>
<div class="showcase-components-colorlist color">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#db2586" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>
How to add a check mark to one of the circles as generated by the code above.

One way to do this is through pseudo content. You need to give the element which you'll set the pseudo content a relative container. Then, you create your pseudo content (in this case, a check mark). The positioning will be relative to the parent element's dimensions.
.showcase-components-colorlist {
border: 2px solid transparent;
margin: 1px;
padding: 2px;
border-radius: 50%;
cursor: pointer;
position: relative;
}
.showcase-components-colorlist.selected::before {
content: '✅';
position: absolute;
left: 11px;
top: 9px;
}
<div class="showcase-components-colorlist color showcase-components-colorlist color-- active">
<svg width="40" height="40"><circle cx="20" cy="20" r="19" fill="#c5145d" stroke="#fff" stroke-width="1">
</circle>
</svg>
</div>
<div class="showcase-components-colorlist selected">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#db2586" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>

Create your own <svg-option> Native JavaScript Web Component.
<svg-option></svg-option>
<svg-option fill="red" selected></svg-option>
<svg-option fill="rebeccapurple" selected-fill="yellow" selected></svg-option>
creates:
<script>
customElements.define("svg-option",class extends HTMLElement{
connectedCallback(){
this.style.display = "inline-block";
this.innerHTML=`<svg viewBox="0 0 50 50">
<circle cx="50%" cy="50%" r="49%" fill="${this.getAttribute("fill") || "green"}"/>
<circle cx="50%" cy="50%" r="30%" fill="${this.getAttribute("selected-fill") || "beige"}" visibility="hidden"/>
</svg>`;
this.select();
this.onclick = (evt) => this.toggle();
}
select(state = this.hasAttribute("selected")) {
this.querySelector("circle:nth-child(2)").setAttribute("visibility" , state ? "visible" :"hidden");
}
toggle(){
this.select( this.toggleAttribute("selected") );
}
})
</script>
<style>
svg-option {
--svg-option-size:180px;
width: var(--svg-option-size);
height: var(--svg-option-size);
cursor: pointer;
}
svg-option[selected]{
background:lightgreen;
}
svg-option:not([selected]){
background:pink;
}
</style>
<svg-option></svg-option>
<svg-option fill="red" selected></svg-option>
<svg-option fill="rebeccapurple" selected-fill="yellow" selected></svg-option>

Close menu when click detected outside

I'm trying to close a menu when the user clicks outside of the element. I have tried many solutions from Stack overflow but none of them work for me. The user should be able to click on the menu button (3 dots), which then shows the menu. Then if they click outside of this, it should close each time.
https://jsfiddle.net/Lzeukhcj/1/
Here is my code and what I have tried:
Javascript
const dots = document.querySelector(".dot-wrap");
const popup = document.querySelector(".popup");
dots.onclick = () => {
popup.style.display = "block";
}
document.onclick = (event) => {
let isClickInside = popup.contains(event.target);
if (!isClickInside) {
console.log("outside box");
popup.style.display = 'none';
}
}
SCSS
.tweet-container {
max-width: 100%;
display: flex;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5%;
padding-right: 5%;
border-bottom: solid 1px #f1f1f1;
}
.tweet-container-right {
width: 100%;
margin-left: 10px;
}
.tweet-header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.icon-container {
display: flex;
font-size: 0.8em;
}
.user-info {
display: flex;
align-items: center;
.tweet-name {
font-size: 15px;
margin-right: 3px;
color: #0f1419;
}
.tweet-username {
font-size:15px;
color: #526470;
}
.middle-dot{
margin-left: 3px;
margin-right: 3px;
}
.time {
font-size: 15px;
color: #526470;
}
}
.tweet-text {
font-size: 0.8em;
}
.verified-tick{
margin-right: 3px;
}
.dots-popup-container {
position: relative;
.dots {
width: 18px;
fill: red;
}
.popup {
background-color: white;
position: absolute;
right: 0;
top: 0;
width: 250px;
display: none;
/*height: 0px;*/
transition: 2s ease;
box-shadow: 0 0.5px 4px 0 rgba(0, 0, 0, 0.2);
padding-top: 14px;
.popup-option {
display: flex;
margin-bottom: 20px;
p {
color: #526470;
}
.popup-icon {
width: 20px;
margin-left: 10px;
margin-right: 10px;
fill: #526470;
}
}
}
}
HTML
<div class="tweet-container-right">
<div class="tweet-header">
<div class="user-info">
<h3 class="tweet-name">Title </h3>
<span class="middle-dot">·</span>
<p class="time">2d</p>
</div>
<div class="dots-popup-container">
<div class="dot-wrap">
<svg viewBox="0 0 24 24" aria-hidden="true" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi dots">
<g>
<circle cx="5" cy="12" r="2"></circle>
<circle cx="12" cy="12" r="2"></circle>
<circle cx="19" cy="12" r="2"></circle>
</g>
</svg>
</div>
<div class="popup">
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
<path d="M12 13.415c1.892 0 3.633.95 4.656 2.544.224.348.123.81-.226 1.035-.348.226-.812.124-1.036-.226-.747-1.162-2.016-1.855-3.395-1.855s-2.648.693-3.396 1.854c-.224.35-.688.45-1.036.225-.35-.224-.45-.688-.226-1.036 1.025-1.594 2.766-2.545 4.658-2.545zm4.216-3.957c0 .816-.662 1.478-1.478 1.478s-1.478-.66-1.478-1.478c0-.817.662-1.478 1.478-1.478s1.478.66 1.478 1.478zm-5.476 0c0 .816-.662 1.478-1.478 1.478s-1.478-.66-1.478-1.478c0-.817.662-1.478 1.478-1.478.817 0 1.478.66 1.478 1.478z"></path>
</g>
</svg></div>
<p>Not interested in this tweet</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M20.083 6.173l2.323 2.323c.293.293.768.293 1.06 0s.294-.768 0-1.06l-2.32-2.326 2.322-2.323c.293-.294.293-.77 0-1.062s-.768-.293-1.06 0L20.082 4.05 17.76 1.73c-.293-.293-.768-.293-1.06 0-.147.146-.22.338-.22.53s.072.384.22.53l2.32 2.32-2.32 2.325c-.147.146-.22.338-.22.53s.072.384.22.53c.292.293.767.293 1.06 0l2.323-2.32zM8.417 11.816c1.355 0 2.872-.15 3.84-1.256.813-.93 1.077-2.367.806-4.392-.38-2.826-2.116-4.513-4.645-4.513-2.53 0-4.267 1.687-4.646 4.513-.273 2.025-.01 3.462.805 4.393.968 1.108 2.485 1.257 3.84 1.257zm-3.16-5.448c.16-1.2.786-3.212 3.16-3.212 2.373 0 2.998 2.013 3.16 3.212.207 1.55.056 2.627-.45 3.205-.455.52-1.266.743-2.71.743s-2.256-.223-2.71-.743c-.507-.578-.658-1.656-.45-3.205zm11.44 12.867c-.88-3.525-4.283-5.988-8.28-5.988-3.998 0-7.403 2.463-8.28 5.988-.172.693-.03 1.4.395 1.94.408.522 1.04.822 1.733.822H14.57c.69 0 1.323-.3 1.73-.82.425-.54.568-1.247.396-1.942zm-1.577 1.018c-.126.16-.316.245-.55.245H2.264c-.235 0-.426-.085-.552-.246-.137-.174-.18-.412-.12-.654.71-2.855 3.517-4.85 6.824-4.85s6.113 1.994 6.824 4.85c.06.24.017.48-.12.655z"></path>
</g>
</svg>
</div>
<p>Unfollow whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M1.75 22.354c-.192 0-.384-.073-.53-.22-.293-.293-.293-.768 0-1.06L20.395 1.898c.293-.294.768-.294 1.06 0s.294.767 0 1.06L2.28 22.135c-.146.146-.338.22-.53.22zm1.716-5.577c-.134 0-.27-.036-.392-.11-.67-.413-1.07-1.13-1.07-1.917v-5.5c0-1.24 1.01-2.25 2.25-2.25H6.74l7.047-5.588c.225-.18.533-.215.792-.087.258.125.423.387.423.675v3.28c0 .415-.336.75-.75.75s-.75-.335-.75-.75V3.553L7.47 8.338c-.134.104-.298.162-.467.162h-2.75c-.413 0-.75.337-.75.75v5.5c0 .263.134.5.356.64.353.216.462.678.245 1.03-.14.23-.387.357-.64.357zm10.787 5.973c-.166 0-.33-.055-.466-.162l-4.795-3.803c-.325-.258-.38-.73-.122-1.054.258-.322.73-.38 1.054-.12l3.58 2.838v-7.013c0-.414.335-.75.75-.75s.75.336.75.75V22c0 .288-.166.55-.425.675-.104.05-.216.075-.327.075z"></path>
</g>
</svg> </div>
<p>Mute whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M12 1.25C6.072 1.25 1.25 6.072 1.25 12S6.072 22.75 12 22.75 22.75 17.928 22.75 12 17.928 1.25 12 1.25zm0 1.5c2.28 0 4.368.834 5.982 2.207L4.957 17.982C3.584 16.368 2.75 14.282 2.75 12c0-5.1 4.15-9.25 9.25-9.25zm0 18.5c-2.28 0-4.368-.834-5.982-2.207L19.043 6.018c1.373 1.614 2.207 3.7 2.207 5.982 0 5.1-4.15 9.25-9.25 9.25z"></path>
</g>
</svg>
</div>
<p>Block whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M20.083 6.173l2.323 2.323c.293.293.768.293 1.06 0s.294-.768 0-1.06l-2.32-2.326 2.322-2.323c.293-.294.293-.77 0-1.062s-.768-.293-1.06 0L20.082 4.05 17.76 1.73c-.293-.293-.768-.293-1.06 0-.147.146-.22.338-.22.53s.072.384.22.53l2.32 2.32-2.32 2.325c-.147.146-.22.338-.22.53s.072.384.22.53c.292.293.767.293 1.06 0l2.323-2.32zM8.417 11.816c1.355 0 2.872-.15 3.84-1.256.813-.93 1.077-2.367.806-4.392-.38-2.826-2.116-4.513-4.645-4.513-2.53 0-4.267 1.687-4.646 4.513-.273 2.025-.01 3.462.805 4.393.968 1.108 2.485 1.257 3.84 1.257zm-3.16-5.448c.16-1.2.786-3.212 3.16-3.212 2.373 0 2.998 2.013 3.16 3.212.207 1.55.056 2.627-.45 3.205-.455.52-1.266.743-2.71.743s-2.256-.223-2.71-.743c-.507-.578-.658-1.656-.45-3.205zm11.44 12.867c-.88-3.525-4.283-5.988-8.28-5.988-3.998 0-7.403 2.463-8.28 5.988-.172.693-.03 1.4.395 1.94.408.522 1.04.822 1.733.822H14.57c.69 0 1.323-.3 1.73-.82.425-.54.568-1.247.396-1.942zm-1.577 1.018c-.126.16-.316.245-.55.245H2.264c-.235 0-.426-.085-.552-.246-.137-.174-.18-.412-.12-.654.71-2.855 3.517-4.85 6.824-4.85s6.113 1.994 6.824 4.85c.06.24.017.48-.12.655z"></path>
</g>
</svg>
</div>
<p>Mark as spoiler</p>
</div>
</div>
</div>
</div>

When you click the dots to open the popup, your document click event listener is checking whether the target is a child of the popup. Since the toggle is not, the modal is opened, then closed.
You can fix this by using Event.stopPropagation() to prevent this click event from being captured by the document click event listener when the dots are clicked.
Your JS should be:
window.onload = () => {
const dots = document.querySelector(".dot-wrap");
const popup = document.querySelector(".popup");
dots.onclick = (e) => {
popup.style.display = "block";
e.stopPropagation();
}
document.onclick = (event) => {
let isClickInside = popup.contains(event.target);
if (!isClickInside) {
console.log("outside box");
popup.style.display = 'none';
}
}
}
Demo:
window.onload = () => {
const dots = document.querySelector(".dot-wrap");
const popup = document.querySelector(".popup");
dots.onclick = (e) => {
popup.style.display = "block";
e.stopPropagation();
}
document.onclick = (event) => {
let isClickInside = popup.contains(event.target);
if (!isClickInside) {
console.log("outside box");
popup.style.display = 'none';
}
}
}
/* compiled from scss */
.tweet-container {
max-width: 100%;
display: flex;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5%;
padding-right: 5%;
border-bottom: solid 1px #f1f1f1;
}
.tweet-container-right {
width: 100%;
margin-left: 10px;
}
.tweet-header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.icon-container {
display: flex;
font-size: 0.8em;
}
.user-info {
display: flex;
align-items: center;
}
.user-info .tweet-name {
font-size: 15px;
margin-right: 3px;
color: #0f1419;
}
.user-info .tweet-username {
font-size: 15px;
color: #526470;
}
.user-info .middle-dot {
margin-left: 3px;
margin-right: 3px;
}
.user-info .time {
font-size: 15px;
color: #526470;
}
.tweet-text {
font-size: 0.8em;
}
.verified-tick {
margin-right: 3px;
}
.dots-popup-container {
position: relative;
}
.dots-popup-container .dots {
width: 18px;
fill: red;
}
.dots-popup-container .popup {
background-color: white;
position: absolute;
right: 0;
top: 0;
width: 250px;
display: none;
/*height: 0px;*/
transition: 2s ease;
box-shadow: 0 0.5px 4px 0 rgba(0, 0, 0, 0.2);
padding-top: 14px;
}
.dots-popup-container .popup .popup-option {
display: flex;
margin-bottom: 20px;
}
.dots-popup-container .popup .popup-option p {
color: #526470;
}
.dots-popup-container .popup .popup-option .popup-icon {
width: 20px;
margin-left: 10px;
margin-right: 10px;
fill: #526470;
}
<div class="tweet-container">
<div class="tweet-container-right">
<div class="tweet-header">
<div class="user-info">
<h3 class="tweet-name">Title </h3>
<span class="middle-dot">·</span>
<p class="time">2d</p>
</div>
<div class="dots-popup-container">
<div class="dot-wrap">
<svg viewBox="0 0 24 24" aria-hidden="true" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi dots">
<g>
<circle cx="5" cy="12" r="2"></circle>
<circle cx="12" cy="12" r="2"></circle>
<circle cx="19" cy="12" r="2"></circle>
</g>
</svg>
</div>
<div class="popup">
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
<path d="M12 13.415c1.892 0 3.633.95 4.656 2.544.224.348.123.81-.226 1.035-.348.226-.812.124-1.036-.226-.747-1.162-2.016-1.855-3.395-1.855s-2.648.693-3.396 1.854c-.224.35-.688.45-1.036.225-.35-.224-.45-.688-.226-1.036 1.025-1.594 2.766-2.545 4.658-2.545zm4.216-3.957c0 .816-.662 1.478-1.478 1.478s-1.478-.66-1.478-1.478c0-.817.662-1.478 1.478-1.478s1.478.66 1.478 1.478zm-5.476 0c0 .816-.662 1.478-1.478 1.478s-1.478-.66-1.478-1.478c0-.817.662-1.478 1.478-1.478.817 0 1.478.66 1.478 1.478z"></path>
</g>
</svg></div>
<p>Not interested in this tweet</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M20.083 6.173l2.323 2.323c.293.293.768.293 1.06 0s.294-.768 0-1.06l-2.32-2.326 2.322-2.323c.293-.294.293-.77 0-1.062s-.768-.293-1.06 0L20.082 4.05 17.76 1.73c-.293-.293-.768-.293-1.06 0-.147.146-.22.338-.22.53s.072.384.22.53l2.32 2.32-2.32 2.325c-.147.146-.22.338-.22.53s.072.384.22.53c.292.293.767.293 1.06 0l2.323-2.32zM8.417 11.816c1.355 0 2.872-.15 3.84-1.256.813-.93 1.077-2.367.806-4.392-.38-2.826-2.116-4.513-4.645-4.513-2.53 0-4.267 1.687-4.646 4.513-.273 2.025-.01 3.462.805 4.393.968 1.108 2.485 1.257 3.84 1.257zm-3.16-5.448c.16-1.2.786-3.212 3.16-3.212 2.373 0 2.998 2.013 3.16 3.212.207 1.55.056 2.627-.45 3.205-.455.52-1.266.743-2.71.743s-2.256-.223-2.71-.743c-.507-.578-.658-1.656-.45-3.205zm11.44 12.867c-.88-3.525-4.283-5.988-8.28-5.988-3.998 0-7.403 2.463-8.28 5.988-.172.693-.03 1.4.395 1.94.408.522 1.04.822 1.733.822H14.57c.69 0 1.323-.3 1.73-.82.425-.54.568-1.247.396-1.942zm-1.577 1.018c-.126.16-.316.245-.55.245H2.264c-.235 0-.426-.085-.552-.246-.137-.174-.18-.412-.12-.654.71-2.855 3.517-4.85 6.824-4.85s6.113 1.994 6.824 4.85c.06.24.017.48-.12.655z"></path>
</g>
</svg>
</div>
<p>Unfollow whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M1.75 22.354c-.192 0-.384-.073-.53-.22-.293-.293-.293-.768 0-1.06L20.395 1.898c.293-.294.768-.294 1.06 0s.294.767 0 1.06L2.28 22.135c-.146.146-.338.22-.53.22zm1.716-5.577c-.134 0-.27-.036-.392-.11-.67-.413-1.07-1.13-1.07-1.917v-5.5c0-1.24 1.01-2.25 2.25-2.25H6.74l7.047-5.588c.225-.18.533-.215.792-.087.258.125.423.387.423.675v3.28c0 .415-.336.75-.75.75s-.75-.335-.75-.75V3.553L7.47 8.338c-.134.104-.298.162-.467.162h-2.75c-.413 0-.75.337-.75.75v5.5c0 .263.134.5.356.64.353.216.462.678.245 1.03-.14.23-.387.357-.64.357zm10.787 5.973c-.166 0-.33-.055-.466-.162l-4.795-3.803c-.325-.258-.38-.73-.122-1.054.258-.322.73-.38 1.054-.12l3.58 2.838v-7.013c0-.414.335-.75.75-.75s.75.336.75.75V22c0 .288-.166.55-.425.675-.104.05-.216.075-.327.075z"></path>
</g>
</svg> </div>
<p>Mute whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M12 1.25C6.072 1.25 1.25 6.072 1.25 12S6.072 22.75 12 22.75 22.75 17.928 22.75 12 17.928 1.25 12 1.25zm0 1.5c2.28 0 4.368.834 5.982 2.207L4.957 17.982C3.584 16.368 2.75 14.282 2.75 12c0-5.1 4.15-9.25 9.25-9.25zm0 18.5c-2.28 0-4.368-.834-5.982-2.207L19.043 6.018c1.373 1.614 2.207 3.7 2.207 5.982 0 5.1-4.15 9.25-9.25 9.25z"></path>
</g>
</svg>
</div>
<p>Block whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M20.083 6.173l2.323 2.323c.293.293.768.293 1.06 0s.294-.768 0-1.06l-2.32-2.326 2.322-2.323c.293-.294.293-.77 0-1.062s-.768-.293-1.06 0L20.082 4.05 17.76 1.73c-.293-.293-.768-.293-1.06 0-.147.146-.22.338-.22.53s.072.384.22.53l2.32 2.32-2.32 2.325c-.147.146-.22.338-.22.53s.072.384.22.53c.292.293.767.293 1.06 0l2.323-2.32zM8.417 11.816c1.355 0 2.872-.15 3.84-1.256.813-.93 1.077-2.367.806-4.392-.38-2.826-2.116-4.513-4.645-4.513-2.53 0-4.267 1.687-4.646 4.513-.273 2.025-.01 3.462.805 4.393.968 1.108 2.485 1.257 3.84 1.257zm-3.16-5.448c.16-1.2.786-3.212 3.16-3.212 2.373 0 2.998 2.013 3.16 3.212.207 1.55.056 2.627-.45 3.205-.455.52-1.266.743-2.71.743s-2.256-.223-2.71-.743c-.507-.578-.658-1.656-.45-3.205zm11.44 12.867c-.88-3.525-4.283-5.988-8.28-5.988-3.998 0-7.403 2.463-8.28 5.988-.172.693-.03 1.4.395 1.94.408.522 1.04.822 1.733.822H14.57c.69 0 1.323-.3 1.73-.82.425-.54.568-1.247.396-1.942zm-1.577 1.018c-.126.16-.316.245-.55.245H2.264c-.235 0-.426-.085-.552-.246-.137-.174-.18-.412-.12-.654.71-2.855 3.517-4.85 6.824-4.85s6.113 1.994 6.824 4.85c.06.24.017.48-.12.655z"></path>
</g>
</svg>
</div>
<p>Mark as spoiler</p>
</div>
</div>
</div>
</div>

How to align SVG image on the both sides of the other SVGpath?

I am trying to make an animation in HTML CSS and JS where the honeybees can fly with the piece of their hive the problem comes when I want the bees on both ends of the beehive below ( pink color represents bees and the rest of them represents hive-pieces and this is for understanding not the actual markup. Code is attached below image ) because I am using SVG for each of them and every hive piece as an SVG path and bees are complete SVG image and I don't know how to display beehive piece with honeybees on both ends I tried to do this by using display: flex; but it doesn't work
Can anyone tell me how to do that? The code is
here is the HTML and CSS with SVG elements and I have commented over every beehive piece in HTML
/* #import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap'); */
*,::before,::after{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
font-family:Roboto ;
}
/* .container{
border:2px solid black;
padding:10px;
} */
.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:.5em 1.5em;
/* 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 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:100vh;
font-family: poppins;
}
.hero-wrapper{
/* border: 2px solid hotpink; */
width:80%;
margin:0 auto;
margin-top:130px;
display:flex;
justify-content: space-between;
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:28.5em;
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;
}
/* 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(-3deg);
}
100%{
transform: rotate(3deg);
}
}
.side-bees{
display: flex;
transform: rotate(50deg);
width:250px;
}
<!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">
<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>HOME</li>
<li>SERVICES</li>
<li>CONTACT</li>
<li>ABOUT</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 width="300" height="300" viewBox="15 0 630 630" fill="none" xmlns="http://www.w3.org/2000/svg">
<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>
<!-- beehive piece -->
<path id="b-peice-7"
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"
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"
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 -->
<path id="b-peice-4"
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 -->
<path id="b-peice-3"
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 -->
<path id="b-peice-2"
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 -->
<path id="b-peice-1"
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" />
<path id="beehive-gate"
d="M136 384H200V352C200 334.327 185.673 320 168 320C150.327 320 136 334.327 136 352V384Z"
fill="#763A02" />
</g>
</svg>
</div>
</div>
</div>
<!--END OF THE CONTAINER-->
</div>
</body>
</html>
Here is the honey Bee SVG
<div class="svg">
<svg width="78" height="49" viewBox="0 0 78 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<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>
</svg>
</div>
Thanks in advance

Since you'll use it a lot I would change the bee in a symbol. Please note that the symbol has the same viewBox as your svg.
In the next example I'm using only the middle "piece".
You will need to know the bounding box of the piece. You can get it using the getBBox() method in javascript. In this case the method is returning this for the piece:
height: 48
width: 344
x: 0
y: 288
Now I can use the symbol like so:
<use xlink:href="#theBee" width="62.4" height="38.4" x="344" y="288" />
I choose a width="62.4" and a height="38.4" for the use element. This is preserving the aspect ratio of the bee.
For the position y="288" is the same as the y of the piece bounding box. As for the x this is the x of the piece bounding box + the width of the same.
For the bee on the other side I want a reversed bee so I'm scaling it transform="scale(-1,1)" Since the x="0" and the transformation takes place around the x="0" point I don't need a x attribute for this bee. the y="288"
An observation about xlink:href:
The attribute xlink:href is deprecated: see MDN. If you want you can use href instead. I still use it for older browsers. Here is an article from css-tricks.com about xlink:href
svg{border:solid}
<svg width="300" height="300" viewBox="-140 0 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">
<!-- beehive piece -->
<!-- beehive piece -->
<path id="b-peice-4" 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" />
<!-- b-peice-4's bounding box
height: 48
width: 344
x: 0
y: 288-->
<use xlink:href="#theBee" width="62.4" height="38.4" x="344" y="288" />
<use xlink:href="#theBee" width="62.4" height="38.4" transform="scale(-1,1)" y="288" />
</g>
</svg>

Start css animation only when button clicked for multiple div overlapping each other

I have a few different content(div) overlapping each other in one place. I wanted to have a fade in animation when i click the trigger to show the desired content. But the animation is only play when the page is onload and would never play again if i trigger another content.
HTML code:
<div id="content">
<div class="content1 sq" id="square"></div>
<div class="content2 sq" id="square"></div>
<div class="content3 sq" id="square"></div>
</div>
CSS code:
#square{
opacity: 1;
animation: fade 3s linear;
}
#keyframes fade{
0% {opacity: 0}
100% {opacity: 1}
}
Javascript:
var slideIndex = 1;
showDivs(slideIndex);
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("sq");
var dots = document.getElementsByClassName("click");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.visibility = "hidden";
}
x[slideIndex-1].style.visibility = "visible";
}
The code showed above is not the full code as the button to change to different content is through a SVG.
Please refer the link for the full code.
https://codepen.io/lemon55699/pen/bGVrMXz

If you only want to change the background color on click, then just get the fill color from clicked item and then apply the same background color on your square. like this.
let circles = gsap.utils.toArray([".c1", ".c2", ".c3", ".c4", ".c5", ".c6", ".c7", ".c8", ".c9"]),
angleIncrement = 360 / circles.length;
circles.forEach(function(circle, index) {
circle.addEventListener("click", function() {
gsap.to(".wheel", {
rotation: (index * angleIncrement) + "_short",
duration: 1,
ease: "power1.inOut"
});
});
});
let bounds = document.querySelector(".st0").getBBox();
gsap.set(".wheel", {svgOrigin: (bounds.x + bounds.width / 2) + " " + (bounds.y + bounds.height / 2)});
var slideIndex = 1;
// showDivs(slideIndex);
// function currentDiv() {
// var element = this,
// style = getComputedStyle(element),
// top = style.getPropertyValue('color');
// }
$(document).ready(function(){
$('.click').click(function(){
var bgColor = $(this).css('fill');
$('#square').css('background-color' , bgColor);
});
});
#Layer_1 {width: 25%; height: 25%; padding-top: 20px; position: relative;}
#fixed{fill:none;stroke: #000000;stroke-width:2;}
.st0{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st1{fill:#00FFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st2{fill:#0000FF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st3{fill:#FF00FF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st4{fill:#C1272D;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st5{fill:#ED1C24;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st6{fill:#F15A24;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st7{fill:#FF0000;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st8{fill:#FFFF00;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st9{fill:#00FF00;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.content1{
position: absolute;
top: 50px;
right: 10px;
width: 200px;
height: 200px;
border: 3px solid green;
fill: green;
background-color: green;
}
.content2{
position: absolute;
right: 10px;
top: 60px;
width: 180px;
height: 180px;
border: 3px solid yellow;
background-color: yellow;
}
.content3{
position: absolute;
right: 10px;
top: 70px;
width: 160px;
height: 160px;
border: 3px solid red;
background-color: red;
}
#square{
opacity: 1;
animation: fade 3s linear;
}
#keyframes fade{
0% {opacity: 0}
100% {opacity: 1}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 470 467" style="enable-background:new 0 0 470 467;" xml:space="preserve">
<g class="wheel">
<path class="st0" d="M304,234c0,12.2-3.26,23.64-8.97,33.5c-1.96,3.39-4.21,6.59-6.7,9.57c-7.5,8.92-17.27,15.85-28.41,19.9
c-3.62,1.32-7.4,2.34-11.28,3.02c-3.78,0.66-7.68,1.01-11.64,1.01c-8.05,0-15.77-1.42-22.92-4.03c-3.69-1.34-7.23-3-10.58-4.95
c-10.17-5.87-18.65-14.35-24.53-24.52c-1.94-3.35-3.6-6.89-4.94-10.58c-2.61-7.15-4.03-14.87-4.03-22.92
c0-3.97,0.34-7.85,1.01-11.63c0.68-3.89,1.7-7.66,3.02-11.29c4.05-11.15,10.99-20.92,19.9-28.4c2.98-2.51,6.18-4.76,9.57-6.71
c9.85-5.71,21.29-8.97,33.5-8.97c3.97,0,7.86,0.34,11.64,1.01c11.83,2.07,22.6,7.25,31.43,14.67c2.99,2.51,5.75,5.27,8.25,8.26
c7.42,8.83,12.6,19.59,14.67,31.43C303.66,226.15,304,230.03,304,234z"/>
<g id="stick9">
<line id="wheel" class="st1" x1="332.76" y1="314.35" x2="288.33" y2="277.07"/>
<circle id="wheel" class="st1 c9 click" cx="371.06" cy="346.49" r="50"/>
</g>
<g id="stick8">
<line id="wheel" class="st2" x1="258.71" y1="357.1" x2="248.64" y2="299.99"/>
<circle id="wheel" class="st2 c8 click" cx="267.39" cy="406.34" r="50"/>
</g>
<g id="stick7">
<line id="wheel" class="st3" x1="203.5" y1="292.02" x2="174.5" y2="342.25"/>
<circle id="wheel" class="st3 c7 click" cx="149.5" cy="385.55" r="50"/>
</g>
<g id="stick6">
<line id="wheel" class="st4" x1="174.03" y1="256.92" x2="119.54" y2="276.75"/>
<circle id="wheel" class="st4 c6 click" cx="72.55" cy="293.85" r="50"/>
</g>
<g id="stick5">
<line id="wheel" class="st5" x1="174.03" y1="211.08" x2="119.54" y2="191.25"/>
<circle id="wheel" class="st5 c5 click" cx="72.55" cy="174.15" r="50"/>
</g>
<g>
<line id="wheel" class="st6" x1="203.5" y1="175.97" x2="174.5" y2="125.75"/>
<circle id="wheel" class="st6 c4 click" cx="149.5" cy="82.45" r="50"/>
</g>
<g id="stick3">
<line id="wheel" class="st7" x1="258.71" y1="110.9" x2="248.64" y2="168.01"/>
<circle id="wheel" class="st7 c3 click" cx="267.39" cy="61.66" r="50" >
</g>
<g id="stick2">
<line id="wheel" class="st8" x1="332.76" y1="153.65" x2="288.32" y2="190.94"/>
<circle id="wheel" class="st8 c2 click" cx="371.06" cy="121.51" r="50" />
</g>
<g id="stick1">
<line id="wheel" class="st9" x1="362" y1="234" x2="304" y2="234"/>
<circle id="wheel" class="st9 c1 click" cx="412" cy="234" r="50" />
</g>
</g>
</svg>
<div id="content">
<div class="content1 sq" id="square"></div>
</div>
but as you mentined in comment, if you want to change the whole square with its properties and text and other stuff, then do it something like this, you need to create a relation between the clicked item and the square box, and show only reated item and not others. Like this,
let circles = gsap.utils.toArray([".c1", ".c2", ".c3", ".c4", ".c5", ".c6", ".c7", ".c8", ".c9"]),
angleIncrement = 360 / circles.length;
circles.forEach(function(circle, index) {
circle.addEventListener("click", function() {
gsap.to(".wheel", {
rotation: (index * angleIncrement) + "_short",
duration: 1,
ease: "power1.inOut"
});
});
});
let bounds = document.querySelector(".st0").getBBox();
gsap.set(".wheel", {svgOrigin: (bounds.x + bounds.width / 2) + " " + (bounds.y + bounds.height / 2)});
$(document).ready(function(){
$('.circle').click(function(){
var relation = $(this).data('relation');
var squareReltedToClick = $("#content").find('#' + relation);
$('.sq').removeClass('active');
squareReltedToClick.addClass('active');
var bgColor = $(this).css('fill');
$('.sq').css('background-color', bgColor);
});
});
#Layer_1 {width: 25%; height: 25%; padding-top: 20px; position: relative;}
#fixed{fill:none;stroke: #000000;stroke-width:2;}
.st0{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st1{fill:#00FFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st2{fill:#0000FF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st3{fill:#FF00FF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st4{fill:#C1272D;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st5{fill:#ED1C24;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st6{fill:#F15A24;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st7{fill:#FF0000;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st8{fill:#FFFF00;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st9{fill:#00FF00;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.sq{
position: absolute;
top: 50px;
right: 90px;
width: 200px;
height: 200px;
border: 3px solid green;
fill: green;
background-color: #00FF00;
opacity: 0;
text-align:center;
color: #fff;
font-size: 40px;
}
.sq.active {opacity:1;}
.sq.active{
opacity: 1;
animation: fade 3s linear;
}
#keyframes fade{
0% {opacity: 0}
100% {opacity: 1}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 470 467" style="enable-background:new 0 0 470 467;" xml:space="preserve">
<g class="wheel">
<path class="st0" d="M304,234c0,12.2-3.26,23.64-8.97,33.5c-1.96,3.39-4.21,6.59-6.7,9.57c-7.5,8.92-17.27,15.85-28.41,19.9
c-3.62,1.32-7.4,2.34-11.28,3.02c-3.78,0.66-7.68,1.01-11.64,1.01c-8.05,0-15.77-1.42-22.92-4.03c-3.69-1.34-7.23-3-10.58-4.95
c-10.17-5.87-18.65-14.35-24.53-24.52c-1.94-3.35-3.6-6.89-4.94-10.58c-2.61-7.15-4.03-14.87-4.03-22.92
c0-3.97,0.34-7.85,1.01-11.63c0.68-3.89,1.7-7.66,3.02-11.29c4.05-11.15,10.99-20.92,19.9-28.4c2.98-2.51,6.18-4.76,9.57-6.71
c9.85-5.71,21.29-8.97,33.5-8.97c3.97,0,7.86,0.34,11.64,1.01c11.83,2.07,22.6,7.25,31.43,14.67c2.99,2.51,5.75,5.27,8.25,8.26
c7.42,8.83,12.6,19.59,14.67,31.43C303.66,226.15,304,230.03,304,234z"/>
<g id="stick9">
<line id="wheel" class="st1" x1="332.76" y1="314.35" x2="288.33" y2="277.07"/>
<circle id="wheel" class="st1 c9 circle" data-relation="square9" cx="371.06" cy="346.49" r="50"/>
</g>
<g id="stick8">
<line id="wheel" class="st2" x1="258.71" y1="357.1" x2="248.64" y2="299.99"/>
<circle id="wheel" class="st2 c8 circle" data-relation="square8" cx="267.39" cy="406.34" r="50"/>
</g>
<g id="stick7">
<line id="wheel" class="st3" x1="203.5" y1="292.02" x2="174.5" y2="342.25"/>
<circle id="wheel" class="st3 c7 circle" data-relation="square7" cx="149.5" cy="385.55" r="50"/>
</g>
<g id="stick6">
<line id="wheel" class="st4" x1="174.03" y1="256.92" x2="119.54" y2="276.75"/>
<circle id="wheel" class="st4 c6 circle" data-relation="square6" cx="72.55" cy="293.85" r="50"/>
</g>
<g id="stick5">
<line id="wheel" class="st5" x1="174.03" y1="211.08" x2="119.54" y2="191.25"/>
<circle id="wheel" class="st5 c5 circle" data-relation="square5" cx="72.55" cy="174.15" r="50"/>
</g>
<g>
<line id="wheel" class="st6" x1="203.5" y1="175.97" x2="174.5" y2="125.75"/>
<circle id="wheel" class="st6 c4 circle" data-relation="square4" cx="149.5" cy="82.45" r="50"/>
</g>
<g id="stick3">
<line id="wheel" class="st7" x1="258.71" y1="110.9" x2="248.64" y2="168.01"/>
<circle id="wheel" class="st7 c3 circle" data-relation="square3" cx="267.39" cy="61.66" r="50"/>
</g>
<g id="stick2">
<line id="wheel" class="st8" x1="332.76" y1="153.65" x2="288.32" y2="190.94"/>
<circle id="wheel" class="st8 c2 circle" data-relation="square2" cx="371.06" cy="121.51" r="50"/>
</g>
<g id="stick1">
<line id="wheel" class="st9" x1="362" y1="234" x2="304" y2="234"/>
<circle id="wheel" class="st9 c1 circle" data-relation="square1" cx="412" cy="234" r="50" />
</g>
</g>
</svg>
<div id="content">
<div class="content1 sq active" id="square1">I am number 1</div>
<div class="content2 sq" id="square2">I am number 2</div>
<div class="content3 sq" id="square3">I am number 3</div>
<div class="content4 sq" id="square4">I am number 4</div>
<div class="content5 sq" id="square5">I am number 5</div>
<div class="content6 sq" id="square6">I am number 6</div>
<div class="content7 sq" id="square7">I am number 7</div>
<div class="content8 sq" id="square8">I am number 8</div>
<div class="content9 sq" id="square9">I am number 9</div>
</div>
I have changed some CSS properties for demo purpose, change these as per your need.

My element wont position center

My element "#splashlogo" doesn't seem to want to centre in the body of my document.I have tried positions; absolute, relative, fixed etc. I'm not sure what is happening.
It may be something to do with other parts of my code...?
My HTML:
<html><head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/splashscreenstyle.css">
</head>
<body>
<script src="http://codepen.io/assets/libs/fullpage/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
//hiding initially
$('.scene').hide();
//Fade In and delay 2.5 sec then Fade Out
$('.splashscreenlogo').hide().fadeIn(function() {
$(this).delay(2500).fadeOut(function() {
//Fade In and delay 3 sec then Fade Out
$('.scene').fadeIn(function() {
$(this).delay(15000).fadeOut(function() {
//Redirect to any location
window.location = 'index.html';
});
});
});
});
});
window.onload = function() {
Animate(1);
Animate(2);
}
function Animate(number) {
var line = document.getElementById('movingLine' + number);
var lineLength = line.getTotalLength().toString();
var lineAnim = document.getElementById('lineAnim' + number);
line.setAttributeNS(null, 'stroke-dasharray', lineLength + " " + lineLength);
line.setAttributeNS(null, 'stroke-dashoffset', lineLength);
lineAnim.setAttributeNS(null, 'from', lineLength);
lineAnim.setAttributeNS(null, 'values', lineLength + ';0');
}
function fade(number) {
var line = document.getElementById('movingLine' + number);
var animation = document.createElementNS(
'http://www.w3.org/2000/svg', 'animate');
animation.setAttributeNS(null, 'attributeName', 'opacity');
animation.setAttributeNS(null, 'to', 0);
animation.setAttributeNS(null, 'dur', 3.25);
animation.setAttributeNS(null, 'begin', 10);
animation.setAttributeNS(null, 'fill', 'freeze');
line.appendChild(animation);
}
</script>
<h4></h4>
<div class="scene" style="display: none;">
<svg version="1.1" id="dc-spinner" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width:"38"="" height:"38"="" viewBox="0 0 38 38" preserveAspectRatio="xMinYMin meet">
<text x="14" y="21" font-family="Monaco" font-size="2px" style="letter-spacing:0.6" fill="grey">LOADING
<animate attributeName="opacity" values="0;1;0" dur="1.8s" repeatCount="indefinite"></animate>
</text>
<path fill="#2AA198" stroke="#ffffff" stroke-width="0.5027" stroke-miterlimit="10" d="M5.203,20
c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z">
<animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" calcMode="spline" keySplines="0.4, 0, 0.2, 1" keyTimes="0;1" dur="2s" repeatCount="indefinite"></animateTransform>
</path>
<path fill="#859900" stroke="#ffffff" stroke-width="0.5027" stroke-miterlimit="10" d="M7.078,20
c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203
C12.875,32.922,7.078,27.125,7.078,20z">
<animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1.8s" repeatCount="indefinite"></animateTransform>
</path>
</svg>
</div>
<div class="splashscreenlogo" style="display: block;">
</div>
<div class="canvas_container">
<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" baseProfile="full">
<g>
<path id="movingLine1" d="m 20,-10 l -20,600 z" class="white-line" stroke-dasharray="1200.66650390625 1200.66650390625" stroke-dashoffset="1200.66650390625">
<animate id="lineAnim1" attributeName="stroke-dashoffset" from="1200.66650390625" to="0" dur="5.5s" begin="9.5s" fill="freeze" values="1200.66650390625;0"></animate>
</path></g>
<g>
<path id="movingLine2" d="m 80,-10 l -20,600 z" class="white-line" stroke-dasharray="1200.66650390625 1200.66650390625" stroke-dashoffset="1200.66650390625">
<animate id="lineAnim2" attributeName="stroke-dashoffset" from="1200.66650390625" to="0" dur="5.5s" begin="10.5s" fill="freeze" values="1200.66650390625;0"></animate>
</path></g>
</svg>
</div>
<div id="splashlogo">
<img src="logo_splashscreen.png" alt="Splashscreen logo">
</div></body></html>
My CSS:
/* Demo Styles */
html {
height: 100%;
min-height: 100%;
overflow: hidden;
}
html body {
background: url("Splashscreen.png") no-repeat;
background-size: 100%;
font: 14px/21px Monaco, sans-serif;
color: none;
font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
height: 100%;
min-height: 100%;
}
html body a, html body a:visited {
text-decoration: none;
color: #FFffF;
}
html body h4 {
margin: 0;
color: #666;
}
.scene {
width: 100%;
height: 100%;
-webkit-perspective: 600;
perspective: 600;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.scene svg {
width: 240px;
height: 240px;
}
.splashscreenlogo{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
/* height: 100%; */
}
#splashlogo{
position: absolute;
background-position: 50%;
/* top: 50%; */
/* width: 100%; */
/* height: 100%; */
}
.canvas_container{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}
.white-line {
fill: none;
stroke: white;
stroke-width: 5%;
}
Any help would be awesome!

Categories

Resources