How to recreate specific animation - css

Question

I'm trying to make an image slideshow that has a transition effect like seen here. I unfortunately only have this gif to go by and I have not been able to locate live web example. The slideshow should show 3 images at a time, then slide to the next 3, and so on. I started with using the slick slider to do most of the slideshow work for me (this is not a requirement). But I'm having difficulty recreating a transition that looks like the effect in the sample. I tried animating padding between the images but that causes the images to change size and causing the images to go off center. Using box-sizing: border-box did not help in this case. Any help on how to create this transition would be greatly appreciated. Here's my code:
$(document).ready(function(){
$('.slider').slick({
infinite: true,
arrows: true,
slidesToShow: 3,
slidesToScroll: 3,
speed: 500
});
});
.wrapper{
position: relative;
box-sizing: border-box;
}
.slick-slide img{
width:100%;
box-sizing:border-box;
}
.slick-slide{
padding: 0;
box-sizing: border-box;
}
.slick-active{
animation: slidetransition;
animation-duration: 3s;
}
#keyframes slidetransition {
0% {
padding: 0px;
}
50% {
padding: 0px 25px;
}
100% {
padding:0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="wrapper">
<div class="slider">
<div class="group1">
<img src="http://placehold.it/350x150/292929/dd0909&text=Slide_1">
</div>
<div class="group1">
<img src="http://placehold.it/350x150/292929/dd6809&text=Slide_2">
</div>
<div class="group1">
<img src="http://placehold.it/350x150/292929/fdff3b&text=Slide_3">
</div>
<div class="group2">
<img src="http://placehold.it/350x150/292929/3bff3b&text=Slide_4">
</div>
<div class="group2">
<img src="http://placehold.it/350x150/292929/5d87ff&text=Slide_5">
</div>
<div class="group2">
<img src="http://placehold.it/350x150/292929/ab8df8&text=Slide_6">
</div>
</div>
</div>

Answer 1

If you can group your items in groups of 3, this solution can work for you.
I am setting different delays to achieve the effect of the items moving separately and the grouping again
var page = 1;
window.onload = function() {
setInterval(changePage, 4000);
}
function changePage() {
var previous = document.querySelector(".previous");
if (previous) {
previous.classList.remove("previous");
}
var active = document.querySelector(".active");
active.classList.remove("active");
active.classList.add("previous");
page++;
if (page > 3) {
page = 1;
}
var id = "page" + page;
var newActive = document.getElementById(id);
newActive.classList.add("active");
}
.carousel {
height: 150px;
width: 500px;
position: relative;
}
.page {
width: 100%;
height: 100%;
display: flex;
position: absolute;
overflow: hidden;
}
.elem {
height: 98%;
width: 33%;
font-size: 100px;
border: solid 1px black;
transition: transform 1s;
transform: translateX(300%);
opacity: 0;
}
.active .elem {
transform: translateX(0%);
opacity: 1;
}
.previous .elem {
transform: translateX(-300%);
opacity: 1;
}
.elem:nth-child(1) {
background-color: tomato;
transition-delay: 0s;
}
.elem:nth-child(2) {
background-color: yellow;
transition-delay: 0.1s;
}
.elem:nth-child(3) {
background-color: lightblue;
transition-delay: 0.2s;
}
.active .elem:nth-child(1) {
transition-delay: 0.3s;
}
.active .elem:nth-child(2) {
transition-delay: 0.4s;
}
.active .elem:nth-child(3) {
transition-delay: 0.5s;
}
<div class="carousel">
<div class="page active" id="page1">
<div class="elem">1</div>
<div class="elem">1</div>
<div class="elem">1</div>
</div>
<div class="page" id="page2">
<div class="elem">2</div>
<div class="elem">2</div>
<div class="elem">2</div>
</div>
<div class="page" id="page3">
<div class="elem">3</div>
<div class="elem">3</div>
<div class="elem">3</div>
</div>
</div>
Here another snippet, working with nbuttons, and responsive
var page = 1;
var numPages = 4;
function forward() {
changePage(1);
}
function back() {
changePage(-1);
}
function changePage (inc) {
var ele = document.querySelector(".carousel");
if (inc > 0) {
ele.className = "carousel forward";
} else {
ele.className = "carousel back";
}
page += inc;
if (page > numPages) {
page = 1;
}
if (page < 1) {
page = numPages;
}
var id = page - 3;
if (id < 0) {
id += numPages;
}
document.getElementById("page" + (id % numPages)).className = "page";
id ++;
document.getElementById("page" + (id % numPages)).className = "page left";
id ++;
document.getElementById("page" + id % numPages).className = "page active";
id ++;
document.getElementById("page" + id % numPages).className = "page right";
id ++;
document.getElementById("page" + id % numPages).className = "page";
}
.carousel {
height: 200px;
width: 98%;
border: solid 3px black;
position: relative;
margin-left: 1%;
}
.page {
eft: 300px;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
position: absolute;
overflow: hidden;
}
.page:nth-child(2) {
op: 100px;
}
.page:nth-child(3) {
op: 200px;
}
.elem {
height: 100%;
width: 33.33%;
font-size: 100px;
transition: transform 1s;
transform: translateX(300%);
z-index: 1;
opacity: 0;
}
.active .elem {
transform: translateX(0%);
z-index: 2;
opacity: 1;
}
.left .elem {
transform: translateX(-300%);
}
.forward .left .elem {
z-index: 2;
opacity: 1;
}
.right .elem {
transform: translateX(300%);
}
.back .right .elem {
z-index: 2;
opacity: 1;
}
.elem:nth-child(1) {
background-color: tomato;
}
.elem:nth-child(2) {
background-color: yellow;
}
.elem:nth-child(3) {
background-color: lightblue;;
}
.back .right .elem:nth-child(3) {
transition-delay: 0s;
}
.back .right .elem:nth-child(2) {
transition-delay: 0.1s;
}
.back .right .elem:nth-child(1) {
transition-delay: 0.2s;
}
.back .active .elem:nth-child(3) {
transition-delay: 0.3s;
}
.back .active .elem:nth-child(2) {
transition-delay: 0.4s;
}
.back .active .elem:nth-child(1) {
transition-delay: 0.5s;
}
.forward .left .elem:nth-child(1) {
transition-delay: 0s;
}
.forward .left .elem:nth-child(2) {
transition-delay: 0.1s;
}
.forward .left .elem:nth-child(3) {
transition-delay: 0.2s;
}
.forward .active .elem:nth-child(1) {
transition-delay: 0.3s;
}
.forward .active .elem:nth-child(2) {
transition-delay: 0.4s;
}
.forward .active .elem:nth-child(3) {
transition-delay: 0.5s;
}
button {
font-size: 20px;
margin: 20px;
}
<div class="carousel forward">
<div class="page active" id="page0">
<div class="elem">1</div>
<div class="elem">1</div>
<div class="elem">1</div>
</div>
<div class="page right" id="page1">
<div class="elem">2</div>
<div class="elem">2</div>
<div class="elem">2</div>
</div>
<div class="page" id="page2">
<div class="elem">3</div>
<div class="elem">3</div>
<div class="elem">3</div>
</div>
<div class="page left" id="page3">
<div class="elem">4</div>
<div class="elem">4</div>
<div class="elem">4</div>
</div>
</div>
<button onclick="back()">back</button>
<button onclick="forward()">forward</button>

Answer 2

For performance, a simple transform:translate with pure CSS is much better. If you just need 2 groups of 3 images, the following will do
/*just toggles the "toggle" class on the "slider" element
/* when clicking the toggle button*/
document.getElementById("toggle").addEventListener("click", function(){
document.getElementById("slider").classList.toggle("toggle");
});
.wrapper{
/*hides the 3 overflowing imgs, preventing scrollbars*/
width:100%; overflow:hidden;
}
.slider{
/*classic inline-block whitespace hack*/
font-size:0;
/* so the 2 "groups" are side by side */
width:200%;
/*sets the transition between groups with some delay*/
transition: transform 1.2s;
}
.slider img{
/*sizes the imgs acording to the fixed quantity*/
width:calc(100% / 6);
/*set the transition for the imgs separation*/
transition: transform 1s;
/*sets the default value for transform*/
transform:translateX(0);
}
/*when "toggle" is not active, last images move to the right*/
.slider img:nth-child(4){transform:translateX(40px);}
.slider img:nth-child(5){transform:translateX(80px);}
.slider img:nth-child(6){transform:translateX(120px);}
/*when active, the slide moves 50% left so the second group shows*/
.slider.toggle{transform:translateX(-50%)}
/*when active, first two images move displaces to the left*/
.slider.toggle img:nth-child(1){transform:translateX(-80px);}
.slider.toggle img:nth-child(2){transform:translateX(-40px);}
/*when active, last two images reset to regular position*/
.slider.toggle img:nth-child(4){transform:translateX(0);}
.slider.toggle img:nth-child(5){transform:translateX(0);}
.slider.toggle img:nth-child(6){transform:translateX(0);}
<div class="wrapper">
<div class="slider" id="slider">
<img src="http://placehold.it/350x150/292929/dd0909&text=Slide_1">
<img src="http://placehold.it/350x150/292929/dd6809&text=Slide_2">
<img src="http://placehold.it/350x150/292929/fdff3b&text=Slide_3">
<img src="http://placehold.it/350x150/292929/3bff3b&text=Slide_4">
<img src="http://placehold.it/350x150/292929/5d87ff&text=Slide_5">
<img src="http://placehold.it/350x150/292929/ab8df8&text=Slide_6">
</div>
</div>
<button id="toggle">toggle slides</button>
Feel free to use javascript to automatically switch the groups, it's just a matter of toggling the "toggle" class list.
I've used a button toggle just for testing purposes.