CSS: Smooth transition between elements in an array

Question

I have this array:

myArr = [1, 2, 3, 4]

The first element in this array is displayed on the screen.

There are two buttons (left and right). They fire functions that move the elements in the array forward or backward:

shiftLeft() {
   var firstElement = myArr.shift()
   myArr.push(firstElement)
}

Resulting in: myArr = [2, 3, 4, 1] and now element 2 shows up on the screen.

The unfortunate side affect of this method is that it is difficult to animate the transition for the old element to the new one.

I tried to use keyframes but the animation is not as smooth (and I lack experience).

You can find a generic version of my setup here: https://codepen.io/riza-khan/pen/KKVyaaR

Results I am looking for:

A smooth transition from the first to the second element. Much like any generic carousels from (pick your favorite CSS framework).

Happy to provide additional information should it be required.

Thank you,

Answer 1

You could have an overlay layer that is spawning and removing nodes to trigger the animation, and a setTimer to change the underlay value after the animation completes.

Note: Stack Overflow snippets do not currently support scss , instead see my codepen here .

 const arr = [1, 2, 3, 4]; const left = document.querySelector(".left"); const right = document.querySelector(".right"); const container = document.querySelector(".container"); const overlay = document.querySelector("#overlay"); let prevEle = document.querySelector(".number"); let disabled = false; left.addEventListener("click", function() { if (disabled) return; movement("left", arr); }); right.addEventListener("click", function() { if (disabled) return; movement("right", arr); }); // document.addEventListener("DOMContentLoaded", function () { // setupUI(); // }); function createNew() { let ele = document.createElement("div"); ele.classList.add("number"); ele.classList.add("fadeIn"); ele.innerText = arr[0]; return ele; } function setupUI() { disabled = true; let newEle = createNew(); overlay.removeChild(overlay.firstChild); overlay.prepend(newEle); setTimeout(() => disabled = false, 350); setTimeout(() => prevEle.innerText = arr[0], 350); } function movement(direction, array) { if (direction === "right") { var element = array.shift(); array.push(element); } else { var element = array.pop(); array.unshift(element); } setupUI(); }

 * { margin: 0; padding: 0; box-sizing: border-box; }.container { height: 100vh; background: rgb(250,175,170); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr; .number { grid-column: 1 / -1; cursor: default; }.fadeIn { animation: fadeIn ease.5s; -webkit-animation: fadeIn ease.5s; -moz-animation: fadeIn ease.5s; -o-animation: fadeIn ease.5s; -ms-animation: fadeIn ease.5s; } @keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } }.overlay { position: absolute; width: 100vw; height: 100vh; pointer-events: none; .number { background: rgb(250,175,170); }.container{ background: transparent; } }.number { margin: auto; font-size: 25em; }.btn { margin: auto; border: solid 2px black; padding: 1em 2em; border-radius: 5px; transition: all 0.5s ease; cursor: pointer; &:hover { background: black; color: white; } }

 <div class="overlay"> <div class="overlay container" id="overlay"> </div> </div> <div class="container"> <div class="number">1</div> <button class="btn left">Left</button> <button class="btn right">Right</button> </div>