JS мерцание при анимации элементов

Web Frontend: JavaScript, HTML/CSS
#1

проблема:
мерцание при смене блоков…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" href="logo.png" type="image/png">
    <title>NEWPEW</title>

</head>
<body>
    
    <style>
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.global-container{
    width: 100%;
    margin: auto;
    height: max-content;
    background: rgba(67, 108, 161, 0);

}
.global-container-night{

}
.head-cont{
    width: 100%;
    height: 60px;
    background: rgba(69, 24, 153, 0);
    
}
.head-cont-night{

}
header{
    width: 100%;
    height: inherit;
    background: none;
}
.logo{
    width: 150px;
    height: inherit;
    margin-left: 30px;
    overflow: hidden;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
 }
.logo-img{
    height: 100%;
    width: auto;
    background: none;

 
}

    </style>

    
    <div class="global-container">
        <div class = "head-cont" id = "head-cont">
            <header>
                <div class="logo" id = "logo" >
                    <img src="https://cdn.clipart.email/a68e4ff6e77e2fdc0ef8cde1cb9b25c8_heartbeat-figure-love-heart-sticker-picsart-world-heart-day-2018-_840-859.png" alt="logo" class="logo-img" >
                    <img src="https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwNlaKLtHl-rD_P8yzjO5iOc" alt="logo" class="logo-img" >
                    <img src="http://clipart-library.com/new_gallery/66823_sound-waves-png.jpg" alt="logo" class="logo-img" >
                              
                </div>
            </header>
        </div>

<script>

window.onload = function(){
    let col = document.getElementById("logo").children;
 
    let logo = {
        
        elm: col[0],
        objsize: ()=>{
            size = getComputedStyle(col[0]);
            size = size.width.split("px")[0];
            size = Number(size);

            return size;
        },
    };


    let logotiming = function linear(timeFraction) {
        return timeFraction;
    };

    let logodraw = function draw(progress,obj){
        
        let margine = -obj.objsize() * progress;
        obj.elm.style.marginLeft = margine  + "px";

    };

    let movelogo = {
        duration: undefined,
        timing: logotiming,
        draw: logodraw,
    };
    


    moveLogo(movelogo,logo);

    function moveLogo({timing, draw, duration, }, obj) {
        duration = obj.objsize()*20;
        let start = performance.now();

        requestAnimationFrame(function animate(time) {
        
            let timeFraction = (time - start) / duration;
            if (timeFraction >= 1) {

                timeFraction = 1;
                let f = obj.elm.cloneNode();
                f.style.marginLeft = "0px";
                obj.elm.parentNode.append(f);
                obj.elm.remove();
                obj.elm = col[0];
                moveLogo(movelogo,obj);
            }
            let progress = timing(timeFraction);

            draw(progress, obj); 

            if (timeFraction < 1) {
                requestAnimationFrame(animate);
            }

        });
    }

}

   



</script>

</div>


</body>
</html>
#2

Что-то тут сложно разобраться, почему-то requestAnimationFrame вызывается как-то непонятно из разных мест.

Обычно его просто в конце колбэка вызывают, а до этого анимируют что надо используя прошедшее время.

Как тут
Window.requestAnimationFrame() - Web APIs | MDN

#3

задалбало разибрать эти макароны)) качество кода желает лучшего.Рекурсия идет нездоровая.Докопался до того что понял у тебя после того как зайдет по рекурсии сюда

   if (timeFraction >= 1) {
   }

нужно с задержкой вызвать
вот это

  if (timeFraction < 1) {
                requestAnimationFrame(animate);
            }

дальше надоело разбирться ссори) легче переписать