Image slider/carousel not running smoothly when click next/previous?

Question

https://codepen.io/sub0-l3/pen/xjPwBP

I really like this slider but can't figure out a way so that when you move the slider it moves smoothly? There seems to be some frames where the slider is pushed back before moving forward when you click on the arrows. I was wondering how I can make it so that it wouldn't do this? I've been trying to figure it out but no luck.

Thank you!

.move-out-from-left {
    animation: moveOutLeft 0.5s ease-in-out;
}

.move-out-from-right {
    animation: moveOutRight 0.5s ease-in-out;
}

.move-to-position5-from-left {
    animation: moveToP5Left 0.5s ease-in-out;
}

.move-to-position4-from-left {
    animation: moveToP4Left 0.5s ease-in-out;
}

.move-to-position3-from-left {
    animation: moveToP3Left 0.5s ease-in-out;
}

.move-to-position2-from-left {
    animation: moveToP2Left 0.5s ease-in-out;
}


.move-to-position1-from-left{
    animation: moveToP1Left 0.5s ease-in-out;
}

.move-to-position5-from-right{
    animation: moveToP5Right 0.5s ease-in-out;
}
.move-to-position4-from-right{
    animation: moveToP4Right 0.5s ease-in-out;
}
.move-to-position3-from-right{
    animation: moveToP3Right 0.5s ease-in-out;
}
.move-to-position2-from-right{
    animation: moveToP2Right 0.5s ease-in-out;
}
.move-to-position1-from-right{
    animation: moveToP1Right 0.5s ease-in-out;
}

@keyframes moveOutLeft {
    0% {
        transform: scale(0.75) translateX(0%);
        opacity: 1;
    }
    50% {
        transform: scale(0.5) translateX(-150%);
        opacity: 0.5;
    }
    100% {
        transform: scale(0.25) translateX(0%);
        opacity: 0;
    }
}

@keyframes moveOutRight {
    0% {
        transform: scale(0.75) translateX(0%);
        opacity: 1;
    }
    50% {
        transform: scale(0.5) translateX(150%);
        opacity: 0.5;
    }
    100% {
        transform: scale(0.25) translateX(0%);
        opacity: 0;
    }
}


@keyframes moveToP5Left {
    from {
        transform: scale(0.75) translateX(100%);
    }
    to {
        transform: scale(0.75) translateX(0);
    }
}

@keyframes moveToP4Left {
    from {
        transform: scale(0.75) translateX(100%);
    }
    to {
        transform: scale(0.85) translateX(0);
    }
}

@keyframes moveToP3Left {
    from {
        transform: scale(0.85) translateX(100%);
    }
    to {
        transform: scale(1) translateX(0);
    }
}

@keyframes moveToP2Left {
    from {
        transform: scale(1) translateX(100%);
    }
    to {
        transform: scale(0.85) translateX(0);
    }
}

@keyframes moveToP1Left {
    from {
        transform: scale(0.85) translateX(100%);
    }
    to {
        transform: scale(0.75) translateX(0);
    }
}

Answer 1

Try this. I got rid of a lot of the translateX as that is what was causing it to jump like that and changed ease-in-out to just ease-in

.move-out-from-left {
    animation: moveOutLeft 0.5s ease-in;
}    
.move-out-from-right {
    animation: moveOutRight 0.5s ease-in;
}    
.move-to-position5-from-left {
    animation: moveToP5Left 0.5s ease-in;
}    
.move-to-position4-from-left {
    animation: moveToP4Left 0.5s ease-in;
}    
.move-to-position3-from-left {
    animation: moveToP3Left 0.5s ease-in;
}    
.move-to-position2-from-left {
    animation: moveToP2Left 0.5s ease-in;
}    
.move-to-position1-from-left{
    animation: moveToP1Left 0.5s ease-in;
}   
.move-to-position5-from-right{
    animation: moveToP5Right 0.5s ease-in;
}
.move-to-position4-from-right{
    animation: moveToP4Right 0.5s ease-in;
}
.move-to-position3-from-right{
    animation: moveToP3Right 0.5s ease-in;
}
.move-to-position2-from-right{
    animation: moveToP2Right 0.5s ease-in;
}
.move-to-position1-from-right{
    animation: moveToP1Right 0.5s ease-in;
}

@keyframes moveOutLeft {
    0% {
        transform: scale(0.75) translateX(0%);
        opacity: 1;
    }    
    100% {
        transform: scale(0.25) translateX(0%);
        opacity: 0;
    }
}

@keyframes moveOutRight {
    0% {
        transform: scale(0.75) translateX(0%);
        opacity: 1;
    }    
    100% {
        transform: scale(0.25) translateX(0%);
        opacity: 0;
    }
}


@keyframes moveToP5Left {
    from {
        transform: scale(0.75) translateX(50%);
    }
    to {
        transform: scale(0.75) translateX(0);
    }
}

@keyframes moveToP4Left {
    from {
        transform: scale(0.75) translateX(50%);
    }
    to {
        transform: scale(0.85) translateX(0);
    }
}

@keyframes moveToP3Left {
    from {
        transform: scale(0.85) translateX(50%);
    }
    to {
        transform: scale(1) translateX(0);
    }
}

@keyframes moveToP2Left {
    from {
        transform: scale(1) translateX(50%);
    }
    to {
        transform: scale(0.85) translateX(0);
    }
}

@keyframes moveToP1Left {
    from {
        transform: scale(0.85) translateX(50%);
    }
    to {
        transform: scale(0.75) translateX(0);
    }
}


@keyframes moveToP1Right {
    from {
        transform: scale(0.75) translateX(-50%);
    }
    to {
        transform: scale(0.75) translateX(0);
    }
}

@keyframes moveToP2Right {
    from {
        transform: scale(0.75) translateX(-50%);
    }
    to {
        transform: scale(0.85) translateX(0);
    }
}

@keyframes moveToP3Right {
    from {
        transform: scale(0.85) translateX(-50%);
    }
    to {
        transform: scale(1) translateX(0);
    }
}

@keyframes moveToP4Right {
    from {
        transform: scale(1) translateX(-50%);
    }
    to {
        transform: scale(0.85) translateX(0);
    }
}

@keyframes moveToP5Right {
    from {
        transform: scale(0.85) translateX(-50%);
    }
    to {
        transform: scale(0.75) translateX(0);
    }
}

Your main issue was you were over translating.

 function shiftLeft() { const boxes = document.querySelectorAll(".box"); const tmpNode = boxes[0]; boxes[0].className = "box move-out-from-left"; setTimeout(function() { if (boxes.length > 5) { tmpNode.classList.add("box--hide"); boxes[5].className = "box move-to-position5-from-left"; } boxes[1].className = "box move-to-position1-from-left"; boxes[2].className = "box move-to-position2-from-left"; boxes[3].className = "box move-to-position3-from-left"; boxes[4].className = "box move-to-position4-from-left"; boxes[0].remove(); document.querySelector(".cards__container").appendChild(tmpNode); }, 500); } function shiftRight() { const boxes = document.querySelectorAll(".box"); boxes[4].className = "box move-out-from-right"; setTimeout(function() { const noOfCards = boxes.length; if (noOfCards > 4) { boxes[4].className = "box box--hide"; } const tmpNode = boxes[noOfCards - 1]; tmpNode.classList.remove("box--hide"); boxes[noOfCards - 1].remove(); let parentObj = document.querySelector(".cards__container"); parentObj.insertBefore(tmpNode, parentObj.firstChild); tmpNode.className = "box move-to-position1-from-right"; boxes[0].className = "box move-to-position2-from-right"; boxes[1].className = "box move-to-position3-from-right"; boxes[2].className = "box move-to-position4-from-right"; boxes[3].className = "box move-to-position5-from-right"; }, 500); } 

 html { font-size: 16px; } * { margin: 0px; padding: 0px; } body { font-family: "Lato", sans-serif; } .container { display: flex; justify-content: space-around; align-items: center; } .button { margin-left: 0 3%; width: 2rem; cursor: pointer; } .button--inactive { opacity: 0.2; } .button img { width: 60%; } .cards-wrapper { display: flex; flex-direction: column; align-items: center; } .cards__container { display: flex; align-items: center; justify-content: center; height: 25rem; } .box { /* margin: -1.5rem; */ width: 12rem; height: 20rem; box-shadow: 0px 0px 2rem 0px #888888; background-color: white; display: flex; justify-content: center; align-items: center; position: relative; /* transition: 1s all; */ } .box:nth-child(2n) { transform: scale(0.85); z-index: -1; } .box:nth-child(2) { left: 5%; } .box:nth-child(4) { left: -5%; } .box:nth-child(4n + 1) { transform: scale(0.75); z-index: -2; } .box:nth-child(1) { left: 15%; } .box:nth-child(5) { left: -15%; } .card__text-content { text-align: center; width: 75%; } .card__title { padding: 1rem; } .box--hide { display: none; } .move-out-from-left { animation: moveOutLeft 0.5s ease-in; } .move-out-from-right { animation: moveOutRight 0.5s ease-in; } .move-to-position5-from-left { animation: moveToP5Left 0.5s ease-in; } .move-to-position4-from-left { animation: moveToP4Left 0.5s ease-in; } .move-to-position3-from-left { animation: moveToP3Left 0.5s ease-in; } .move-to-position2-from-left { animation: moveToP2Left 0.5s ease-in; } .move-to-position1-from-left{ animation: moveToP1Left 0.5s ease-in; } .move-to-position5-from-right{ animation: moveToP5Right 0.5s ease-in; } .move-to-position4-from-right{ animation: moveToP4Right 0.5s ease-in; } .move-to-position3-from-right{ animation: moveToP3Right 0.5s ease-in; } .move-to-position2-from-right{ animation: moveToP2Right 0.5s ease-in; } .move-to-position1-from-right{ animation: moveToP1Right 0.5s ease-in; } @keyframes moveOutLeft { 0% { transform: scale(0.75) translateX(0%); opacity: 1; } 100% { transform: scale(0.25) translateX(0%); opacity: 0; } } @keyframes moveOutRight { 0% { transform: scale(0.75) translateX(0%); opacity: 1; } 100% { transform: scale(0.25) translateX(0%); opacity: 0; } } @keyframes moveToP5Left { from { transform: scale(0.75) translateX(50%); } to { transform: scale(0.75) translateX(0); } } @keyframes moveToP4Left { from { transform: scale(0.75) translateX(50%); } to { transform: scale(0.85) translateX(0); } } @keyframes moveToP3Left { from { transform: scale(0.85) translateX(50%); } to { transform: scale(1) translateX(0); } } @keyframes moveToP2Left { from { transform: scale(1) translateX(50%); } to { transform: scale(0.85) translateX(0); } } @keyframes moveToP1Left { from { transform: scale(0.85) translateX(50%); } to { transform: scale(0.75) translateX(0); } } @keyframes moveToP1Right { from { transform: scale(0.75) translateX(-50%); } to { transform: scale(0.75) translateX(0); } } @keyframes moveToP2Right { from { transform: scale(0.75) translateX(-50%); } to { transform: scale(0.85) translateX(0); } } @keyframes moveToP3Right { from { transform: scale(0.85) translateX(-50%); } to { transform: scale(1) translateX(0); } } @keyframes moveToP4Right { from { transform: scale(1) translateX(-50%); } to { transform: scale(0.85) translateX(0); } } @keyframes moveToP5Right { from { transform: scale(0.85) translateX(-50%); } to { transform: scale(0.75) translateX(0); } } 

 <head> <title>3d-carousal</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="container"> <div class="button" onclick="shiftLeft()"><img src="https://image.ibb.co/mRsEb7/left_arrow.png" alt=""></div> <div class="cards-wrapper"> <ul class="cards__container"> <li class="box" style="background-color:red">box 1</li> <li class="box">box 2</li> <li class="box">box 3</li> <li class="box">box 4</li> <li class="box">box 5</li> <li class="box box--hide">box 6</li> <li class="box box--hide">box 7</li> </ul> <div class="card__text-content"> <h3 class="card__title">The Famous Five</h3> <div class="card__summary">The Famous Five is a series of children's adventure novels written by English author Enid Blyton. The first book, Five on a Treasure Island, was published in 1942.</div> </div> </div> <div class="button" onclick="shiftRight()"><img src="https://image.ibb.co/dfPSw7/right_arrow.png" alt=""></div> </div> <script src='js/index.js'></script> </body> 

Please Note that you need to expand the full snippet to see the arrows