Can anyone help me to remove the white space in between them during animation?
do i need to add one more div wrap both div into one?
I have chosen to use position-top to adjust my div animations is that causing the problem and please suggest me a better method to do this animation if any?
<!DOCTYPE HTML>
<html>
<head>
<style>
#top {
background: white;
color: white;
width: 300px;
height: 300px;
display: inline-block;
overflow: hidden;
}
#first {
background: blue;
transition: 0.5s;
height: 300px;
position: relative;
}
#second {
background: green;
transition: 0.5s;
height: 300px;
position: relative;
}
</style>
<script>
var up = true;
var down = false;
function animations() {
if (up) {
document.getElementById('first').style.top = '-300px';
document.getElementById('second').style.top = '-300px';
up = false;
down = true;
}
else if (down) {
document.getElementById('first').style.top = '0px';
document.getElementById('second').style.top = '300px';
down = false;
up = true;
}
}
//timer events
var startAnimations = setInterval(animations, 1000);
</script>
</head>
<body>
<div id="top">
<div id="first">first</div>
<div id="second">second</div>
</div>
</body>
</html>