Develop Reference

Button hover animation bug, when hovering over icon

When hovering over the arrow-icon of the button, for one moment, the text on the right side appears and the arrow-icon changes back to the chevron-icon. It seems like the "mouseout" event fires, even though I'm still hovering over the button. How do I prevent this?
const inviteButton = document.querySelector("#invite-btn button");
const inviteSpanOut = document.getElementById("span-out")
//Changes icon to arrow
inviteButton.addEventListener("mouseover", function() {
inviteButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>`
inviteSpanOut.style.display = "none";
});
//Changes icon to chevron
inviteButton.addEventListener("mouseout", function() {
inviteButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>`
inviteSpanOut.style.display = "inline";
});
#invite-btn {
text-decoration: none;
font-size: 1rem;
}
#invite-btn button {
border-radius: 3rem;
width: 50px;
height: 50px;
border: 0;
background-color: hsla(0, 0%, 10%, 1);
transition: 0.3s ease-out;
}
#invite-btn button:hover {
width: 200px;
}
#invite-btn span {
padding-left: 10px;
font-weight: 600;
letter-spacing: 1px;
transition: 0.3s ease-out;
}
<a id="invite-btn">
<button> <!-- Chevron-Icon-->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>
</button>
<span id="span-out">INVITE NOW</span>
</a>

Easily countered by using pointer-events: none on the SVG itself. See updated example below.
Good luck!
const inviteButton = document.querySelector("#invite-btn button");
const inviteSpanOut = document.getElementById("span-out")
inviteButton.addEventListener("mouseover", function() {
inviteButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>`
inviteSpanOut.style.display = "none";
});
inviteButton.addEventListener("mouseout", function() {
inviteButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>`
inviteSpanOut.style.display = "inline";
});
#invite-btn {
text-decoration: none;
font-size: 1rem;
}
#invite-btn button {
border-radius: 3rem;
width: 50px;
height: 50px;
border: 0;
background-color: hsla(0, 0%, 10%, 1);
transition: 0.3s ease-out;
}
#invite-btn button svg {
pointer-events: none;
}
#invite-btn button:hover {
width: 200px;
}
#invite-btn span {
padding-left: 10px;
font-weight: 600;
letter-spacing: 1px;
transition: 0.3s ease-out;
}
<a id="invite-btn">
<button> <!-- Chevron-Icon-->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>
</button>
<span id="span-out">INVITE NOW</span>
</a>

Remove pointer events from the SVG and it seems to work well.
Also, anchors and buttons have distinct purposes and should never be combined.
Finally, use classes for CSS to make it reusable. I didn't fully convert your script for reusability, but it wouldn't be too difficult.
const inviteButton = document.querySelector(".invite-btn");
const inviteSpanOut = document.querySelector(".span-out")
inviteButton.addEventListener("mouseover", function() {
inviteButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>`
inviteSpanOut.style.display = "none";
});
inviteButton.addEventListener("mouseout", function() {
inviteButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>`
inviteSpanOut.style.display = "inline";
});
.invite-btn {
border-radius: 3rem;
width: 50px;
height: 50px;
border: 0;
background-color: hsla(0, 0%, 10%, 1);
transition: 0.3s ease-out;
}
.invite-btn:hover {
width: 200px;
}
.invite-btn:hover + .span-out {
padding-left: 10px;
font-weight: 600;
letter-spacing: 1px;
transition: 0.3s ease-out;
}
.invite-btn svg {
pointer-events: none;
}
<button class="invite-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>
</button>
<span class="span-out">INVITE NOW</span>

scroll bar with horizontal scroll sticking in the body

I'm asking you for some help because I'm struggling a bit with CSS/JS, it's been a long time since I've practiced.
Basically I'm trying to make a section with a "sticky" title that scrolls horizontally with a block just below it that also stays sticky until I finish making this horizontal scrolling.
I managed to set up the structure but I think I need to add some more JS or modify what has been done. Currently I have 2 scrollbars I would like to have only one but that acts like I have two.
I put you the JSfiddle it will be more clear:
https://jsfiddle.net/ps4b10ro
const spaceHolder = document.querySelector('.space-holder');
const horizontal = document.querySelector('.horizontal');
spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`;
function calcDynamicHeight(ref) {
const vw = window.innerWidth;
const vh = window.innerHeight;
const objectWidth = ref.scrollWidth;
return objectWidth - vw + vh + 150; // 150 is the padding (in pixels) desired on the right side of the .cards container. This can be set to whatever your styles dictate
}
window.addEventListener('scroll', () => {
const sticky = document.querySelector('.sticky');
horizontal.style.transform = `translateX(-${sticky.offsetTop}px)`;
});
window.addEventListener('resize', () => {
spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`;
});
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
mousewheelControl: true,
slidesPerView: 1,
// freeMode: true,
// freeModeSticky: true
});
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 100%;
}
body {
margin: 0;
font-family: sans-serif;
}
.container {
position: relative;
width: 100%;
min-height: 100vh;
}
.space-holder {
background-color: #111;
position: relative;
width: 100%;
}
.sticky {
height: 100vh;
position: sticky;
top: 0;
height: 100vh;
width: 100%;
overflow-x: hidden;
}
.horizontal {
position: absolute;
height: 100%;
will-change: transform;
}
.cards {
position: relative;
height: fit-content;
padding: 0 0 0 150px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
}
.horizontalText {
color: #fff;
font-size: 4em;
padding: 0 3vw 0 3vw;
width: 53vw;
height: fit-content;
}
.etsy {
background-color: #fff;
margin-top: 22vh;
height: 400px;
position: sticky;
bottom: 350vh;
height: 100%;
overflow: hidden;
}
.test {
background-color: blanchedalmond;
height: 1000px;
}
<div class="test"></div>
<div class="module"></div>
<section class="container">
<div class="space-holder">
<div class="sticky">
<div class="horizontal">
<section role="feed" class="cards">
<h2 class="horizontalText">Discovers our products</h2>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#EDD337"/>
</svg>
<h2 class="horizontalText">Discovers our universe</h2>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#EDD337"/>
</svg>
<h2 class="horizontalText">Discovers our products</h2>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#EDD337"/>
</svg>
<h2 class="horizontalText">Discovers our universe</h2>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#EDD337"/>
</svg>
<h2 class="horizontalText">Discovers our products</h2>
</section>
</div>
<section class="etsy sticky">
<section id="emporter container" class="blanc hori">
<div class="wrap">
<div class="defilement">
<a href="/articles/damien-rice">
<div class="cover" style="background:url(https://cdn.blogotheque.net/blogotheque/2019/11/18/fd9c7d252ab9de5569c9fcc96aabaaff.jpg) 50% 50%">
<div><img src="/packs/media/img/play-9e06fa89856b9d33899e081448a066f5.svg" alt=""></div>
</div>
<h3>Damien Rice</h3>
<p>Soirée de Poche #54</p>
</a>
<a href="/articles/benjamin-booker-25870">
<div class="cover" style="background:url(https://cdn.blogotheque.net/blogotheque/2020/01/02/27cd1d46f726bf3e4c15a79ad42e8e0a.png) 50% 50%">
<div><img src="/packs/media/img/play-9e06fa89856b9d33899e081448a066f5.svg" alt=""></div>
</div>
<h3>Benjamin Booker</h3>
<p>Soirée de Poche #53</p>
</a>
<a href="/articles/shame">
<div class="cover" style="background:url(https://cdn.blogotheque.net/blogotheque/2019/11/18/ec085ebc867db30fc41f8be3b247ec37.jpg) 50% 50%">
<div><img src="/packs/media/img/play-9e06fa89856b9d33899e081448a066f5.svg" alt=""></div>
</div>
<h3>Shame</h3>
<p>Soirée de Poche #52</p>
</a>
<a href="/articles/hamilton-leithauser">
<div class="cover" style="background:url(https://cdn.blogotheque.net/blogotheque/2019/12/05/b56f9fbe55b912ad931376338a655440.png) 50% 50%">
<div><img src="/packs/media/img/play-9e06fa89856b9d33899e081448a066f5.svg" alt=""></div>
</div>
<h3>Hamilton Leithauser</h3>
<p>Soirée de Poche #51</p>
</a>
</div>
<div class="navigation">
<!-- <img class="pointer gauche bloque" src="img/agaucheN.svg" alt="" /> -->
<svg class="pointer gauche bloque" height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#111" stroke-width="2" transform="matrix(1 0 0 -1 0 40)"><circle cx="20" cy="20" r="19"></circle><path d="m22.3823529 14-6.3823529 6.3823529 6.3823529 6.4852942"></path></g></svg>
<!-- <img class="pointer droite" src="img/agaucheN.svg" alt="" /> -->
<svg class="pointer droite" height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#111" stroke-width="2" transform="matrix(1 0 0 -1 0 40)"><circle cx="20" cy="20" r="19"></circle><path d="m22.3823529 14-6.3823529 6.3823529 6.3823529 6.4852942"></path></g></svg>
<div class="progress">
<div style="transform: matrix(0.2, 0, 0, 1, 0, 0);"></div>
</div>
</div>
</div>
</section>
</section>
<div class="test">
</div>
Thank you in advance for your help and or your advice

setTimeout animation problem in 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.

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!

I want my elements to fadein and fade out and then the page to close and load another page

Not sure if its possible however what I would like to achieve is the following:
My element with the class ".splashscreenlogo" to show when the document is ready, I would like it to show for 2.5 seconds before it fades out and then my element with a class ".scene" fades in for a further 3 seconds before it fades out again. Once this has finished the whole page redirects to another html page.
Current html:
<div class="scene">
<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"/>
</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" />
</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" />
</path>
</svg>
</div>
<div class="splashscreenlogo">
<img src="logo_splashscreen.png" alt="Splashscreen logo" style="width:100%;height:auto">
</div>
My CSS:
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: 46%;
left: 36%;
}
Any help would be much appreciated!

assuming you have JQuery since you mentioned in tags,
use this to achieve what you want.
$(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(3000).fadeOut(function() {
//Redirect to any location
alert('redirecting to page');
window.location = 'http://google.com';
});
});
});
});
});

You can also try to use SVG's onend event and the repeatCount to form a counter to call a redirecting function like the following:
<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">
<script src="text/javascript">
<![CDATA[
function redirect()
{
alert("Redirecting.");
}
]]>
</script>
<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="2" onend="redirect()"/>
</text>
<path fill="#2AA198" stroke="#ffffff" stroke-width="0.5027" stroke-miterlimit="10" d="M5.203,20c0-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" />
</path>
<path fill="#859900" stroke="#ffffff" stroke-width="0.5027" stroke-miterlimit="10" d="M7.078,20c0-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.203C12.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" />
</path>
</svg>
DEMO Here
You can also try modifying the dur and the repeatCount attributes in the animate tag to match your requirement.

You can use javascript to go to an other page when the animations are ready.
$(document).ready(function(){
setTimeout(function(){
window.location = 'https://www.google.com/';
},3000);
})
/*
for the time I have choosen a random time.
note that the time is in miliseconds
one sec has 1000 ms.
*/
I used Jquery for this because Idon't know how to detect a page ready but you can search that and apply it tou your code.
For the time you have to count the total time of the animation and replace the 500 miliseconds by your time