Trying to do a smooth transition logo from the centre of my browser to the top, left corner after my set interval timer has done 1 second.
What is the best approach for this?
Current code below.
var timesRun = 0;
window.onload = loader()
function loader(){
var newinterval = setInterval(function(){
timesRun += 1;
if(timesRun === 1){
clearInterval(newinterval);
moveLogo();
}
}, 1000);
}
function moveLogo(){
// ????????????
const logo = document.querySelector('.box')
logo.className = 'left'
logo.style.transition = 'all 0.5s';
logo.style.transform = 'translate(0%, 0%)';
}.box {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
display: flex;
align-items: center;
justify-content: space-around;
width: 220px;
height:80px;
color: green;
border: 1px solid black;
};<div class="box"></div>window.onload = loader()
function loader() {
setTimeout(function() {
moveLogo();
}, 1000);
}
function moveLogo() {
document.querySelector('.box').classList.add('move-logo');
}.box {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
display: flex;
align-items: center;
justify-content: space-around;
width: 220px;
height:80px;
color: green;
border: 1px solid black;
}
.move-logo {
left: 0;
top: 0;
margin: 0;
transition: left 1s, top 1s, margin 1s;
}<div class="box"></div>It would be nice to review the way you are centering this <div>. I particularly try to avoid position: absolute, but that will depend on your case.
Edit 1:
Another option is to use pure CSS, without JavaScript.
.box {
position: absolute;
top: 0;
left: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: space-around;
width: 220px;
height:80px;
color: green;
border: 1px solid black;
}
.move-logo {
animation-name: move-from-center;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-delay: 1s;
animation-fill-mode: backwards;
}
@keyframes move-from-center {
0% {
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;
}
}<div class="box move-logo"></div>