I need to animate a group of elements across the page (from the right sliding to the left) but instead of this being one smooth animation I want each element to be centered in the container for 1 second before the next element slides in and then the previous element would slide away off screen.
Each element should stay in the center of the container for 1 second before the next one slides over. It's a dynamic set of elements with varied widths and a dynamic number of items. And I want the first element to already be centered which I have already taken care of.
I can't figure out how to animate this with JavaScript so that each element is centered for 1 second at a time before moving on to the next element.
I can't do this with CSS animations/keyframes alone because I don't know how many frames there would be.
window.onload = function() {
const container = document.querySelector('.tabs');
const tabs = document.getElementsByClassName('tab');
// Calculate initial left offset
const firstTab = tabs[0];
const initialOffset = (firstTab.offsetWidth / 2);
container.style.left = 'calc(50% - ' + initialOffset + 'px)';
}section {
text-align: center;
width: 375px;
background: white;
margin: 0 auto;
padding: 16px;
position: relative;
display: flex;
overflow: hidden;
}
.tabs {
display: flex;
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
.tab {
border-radius: 25px;
background: gray;
margin: 0 8px;
text-align: center;
height: 34px;
display: inline-flex;
align-items: center;
padding: 0 16px;
}<section>
<ul class="tabs">
<li class="tab">Tab One</li>
<li class="tab">Tab Two</li>
<li class="tab">Tab Three</li>
</ul>
</section>