What causes the empty gap to appear during animated transitions between two 'div' elements?

Question

What causes the empty gap to appear during animated transitions between two 'div' elements?

Is there a way to eliminate the white space in between elements during animation?

Should I wrap both divs into another div to achieve this?

I am using position-top to adjust my div animations. Could this be causing the issue? What other methods can you suggest for smoother animations?

<!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>

javascript html css css-animations

Answer 1

Answer №1

Adjust the position of your second div element to be at the top with 0px instead of 300px while scrolling down;

I trust this solution will be beneficial.

Answer 2

Adjust the position of your second div element to be at the top with 0px instead of 300px while scrolling down;

I trust this solution will be beneficial.

Answer 3

Answer №2

When adjusting the style of two divs, ensure that the second div does not go down by setting its top position to 0px, just like the first div. Both divs are relative, and the first one pushes the second, so the total height won't be 300px; it will be 300px + height of first div.

document.getElementById('second').style.top = '0px';

I hope this solution helps!

Answer 4

When adjusting the style of two divs, ensure that the second div does not go down by setting its top position to 0px, just like the first div. Both divs are relative, and the first one pushes the second, so the total height won't be 300px; it will be 300px + height of first div.

document.getElementById('second').style.top = '0px';

I hope this solution helps!

Answer 5

Answer №3

<!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) {
                                      
                up = false;
                down = true;
                document.getElementById('first').style.top = '-300px'; 
                document.getElementById('second').style.top = '-300px';

            }
            else if (down) {
                down = false;
                up = true;
                document.getElementById('second').style.top = '0px';
                document.getElementById('first').style.top = '0px';
                
            }
        }

        //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>

Answer 6

<!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) {
                                      
                up = false;
                down = true;
                document.getElementById('first').style.top = '-300px'; 
                document.getElementById('second').style.top = '-300px';

            }
            else if (down) {
                down = false;
                up = true;
                document.getElementById('second').style.top = '0px';
                document.getElementById('first').style.top = '0px';
                
            }
        }

        //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>

Answer 7

Answer №4

It seems like the issue is related to your relative positioning. Here is a suggested CSS code snippet to address this:

#top {
            background: white;
            color: white;
            width: 300px;
            height: 300px;
            display: inline-block;
            overflow: hidden;
            position:absolute;
        }

        #first {
            background: blue;
            transition: 0.5s;
            height: 300px;
            width:300px;
            position:absolute;
        }

        #second {
            margin:0px;
            background: green;
            transition: 0.5s;
            height: 300px;
            width:300px;
            position: absolute;
        }

Answer 8

It seems like the issue is related to your relative positioning. Here is a suggested CSS code snippet to address this:

#top {
            background: white;
            color: white;
            width: 300px;
            height: 300px;
            display: inline-block;
            overflow: hidden;
            position:absolute;
        }

        #first {
            background: blue;
            transition: 0.5s;
            height: 300px;
            width:300px;
            position:absolute;
        }

        #second {
            margin:0px;
            background: green;
            transition: 0.5s;
            height: 300px;
            width:300px;
            position: absolute;
        }

Answer 9

Answer №5

<!DOCTYPE HTML>
<html>

<head>
    <style>
        #top {
            background: white;
            color: black;
            width: 250px;
            height: 250px;
            display: inline-block;
            overflow: hidden;
        }

        #first {
            background: red;
            transition: 0.7s;
            height: 250px;
            position: absolute;
        }

        #second {
            background: orange;
            transition: 0.7s;
            height: 250px;
            position: absolute;
        }
    </style>
    <script>
        var up = true;
        var down = false;
        function animations() {
            if (up) {
                document.getElementById('first').style.top = '-250px';
                document.getElementById('second').style.top = '-250px';
                up = false;
                down = true;
            }
            else if (down) {
                document.getElementById('first').style.top = '0px';
                document.getElementById('second').style.top = '0';
                down = false;
                up = true;
            }
        }

        //timer events
        var startAnimations = setInterval(animations, 800);
    </script>
</head>

<body>
    <div id="top">
        <div id="first">first block</div>
        <div id="second">second block</div>
    </div>
</body>

</html>

Answer 10

<!DOCTYPE HTML>
<html>

<head>
    <style>
        #top {
            background: white;
            color: black;
            width: 250px;
            height: 250px;
            display: inline-block;
            overflow: hidden;
        }

        #first {
            background: red;
            transition: 0.7s;
            height: 250px;
            position: absolute;
        }

        #second {
            background: orange;
            transition: 0.7s;
            height: 250px;
            position: absolute;
        }
    </style>
    <script>
        var up = true;
        var down = false;
        function animations() {
            if (up) {
                document.getElementById('first').style.top = '-250px';
                document.getElementById('second').style.top = '-250px';
                up = false;
                down = true;
            }
            else if (down) {
                document.getElementById('first').style.top = '0px';
                document.getElementById('second').style.top = '0';
                down = false;
                up = true;
            }
        }

        //timer events
        var startAnimations = setInterval(animations, 800);
    </script>
</head>

<body>
    <div id="top">
        <div id="first">first block</div>
        <div id="second">second block</div>
    </div>
</body>

</html>

What causes the empty gap to appear during animated transitions between two 'div' elements?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Issue with vuejs build process not incorporating relative paths into the final output

Looping through NavItems component using JavaScript or Angular

Load Vue 3 components dynamically using a string-based approach

Troubleshooting Issues with Google Analytics Internal Link trackEvent Functionality

What is the recommended placement for the implicitlyWait method in Protractor?

The <h> tag gains height on its own accord

Create a JavaScript array by extracting IDs from an HTML document

Troubleshooting custom filtering with jQuery Datatables across different tables is presenting challenges

Interacting with PHP variables in JSON format

"Enhance your Django website with a dynamic voting button using AJAX

Packages and Digital Routes

Creating text with stripes using CSS

Personalized validation messages with jQuery

How come submitting a form without refreshing does not update the database with new values?

Is there a way to retrieve two distinct values from an object?

Traverse through an array or object using recursive render functions in JavaScript

Tips for Removing Padding in Material UI Container Component

Get the file from the web browser

How to alter the color of an inline SVG within an <img> element

Is there a way to automatically remove a document in MongoDB and Node.js once its expiration date has passed?