The slider I came across on CodePen caught my eye. I decided to tweak it and incorporate images with varying sizes into the mix. However, there's an issue – when all the logos slide away, the slider abruptly jumps back to the first logo. It disrupts the flow and doesn't look aesthetically pleasing. What I am aiming for is a seamless repeating effect where after the last logo slides off, the first one smoothly appears without any noticeable "jump".
How can I go about resolving this dilemma?
body,
html {
height: 100%;
background-color: white;
}
.container {
overflow: hidden;
}
.container .slider {
animation: slidein 30s linear infinite;
white-space: nowrap;
}
.container .slider .logos {
width: 100%;
display: inline-block;
margin: 0px 0;
}
.container .slider .logos .fab {
width: calc(100% / 5);
animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}
@keyframes slidein {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-100%, 0, 0);
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="container h-100">
<div class="row align-items-center h-100">
<div class="container rounded">
<h1 class="text-center">Featured in:</h1>
<div class="slider">
<div class="logos">
<img src="https://via.placeholder.com/80">
<img src="https://via.placeholder.com/80">
<img src="https://via.placeholder.com/80">
<img src="https://via.placeholder.com/80">
</div>
</div>
</div>
</div>
</div>