Adding a "blinds" transition to my version of Flickity carousel

Question

I have put together THIS codepen slider (carousel) that uses the captions as controls, with the help of the Flickity plugin, with these 2 options:

var flkty = new Flickity(".carousel", {
  pageDots: false,
  wrapAround: true
});

Note: the slider has videos, not images.

I need a transition similar to the blinds transition that antoni.de carousel has.

Questions:

1. What is the easiest and fastest way to do that? Is it a CSS thing only?
2. Do I have to write specific JavaScript for this transition?
3. I would rather borrow that JavaScript, where can I find it in a readable, unminified version?

The code version of the carousel is HERE.

UPDATE: I have added a partial answer. As I say in the answer, I wish I could use the videos themselves for the transition.

Answer 1

Until now I have done the following:

My HTML:

<div id="full_slider" class="carousel">
  <div class="item">
    <div class="bg">
      <video muted loop autoplay>
        <source type="video/mp4" src="video/eroi.mp4"></source>
      </video>
      <div class="photo"><img src="img/agentie_full_service.png" alt="Agentie full-service"></div>
      <div class="cover">
        <div class="third"></div>
        <div class="third"></div>
        <div class="third"></div>
      </div>
    </div>
    <div class="content">
      <h1>Lorem ipsum dolor</h1>
    </div>
  </div>
  <div class="item">
    <div class="bg">
      <video muted loop autoplay>
        <source type="video/mp4" src="video/meda.mp4"></source>
      </video>
      <div class="photo"><img src="img/strategeie_de_brand.png" alt="Strategie de brand"></div>
      <div class="cover">
        <div class="third"></div>
        <div class="third"></div>
        <div class="third"></div>
      </div>
    </div>
    <div class="content">
      <h1>Lorem ipsum dolor</h1>
    </div>
  </div>
</div>

My CSS:

#full_slider .item .bg .cover {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     opacity: 1;
     transition: opacity 0.2s 1s ease;
}
 #full_slider .item .bg .cover div {
     position: absolute;
     top: 0;
     width: 33.3333%;
     height: 100%;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: -100% 0%;
     transition: background-position 0.5s ease;
}
 #full_slider .item.is-selected .cover {
     opacity: 0;
}
 #full_slider .item.is-selected .cover > div:nth-child(1) {
     left: 0;
     transition-delay: 0.5s;
     background-position: 0% 0%;
}
 #full_slider .item.is-selected .cover > div:nth-child(2) {
     left: 33.3333%;
     transition-delay: 0.25s;
     background-position: 50% 0%;
}
 #full_slider .item.is-selected .cover > div:nth-child(3) {
     left: 66.6666%;
     background-position: 100% 0%;
}

My jQuery:

$('#full_slider').find('.photo').each(function(){
  var imgContainer = $(this),
  bkImg = imgContainer.find('img').attr('src');
  imgContainer.next().find('div').css("background-image", 'url("'+ bkImg +'")');
});

The result of this code can be seen here.

I wish I did not have to use images as "covers" for the videos, I wish I could use the videos themselves for the transition. I am looking for an effect like this one.

Answer 2

I'm not sure you want something ready or you want to edit your slider.

But we can edit any slider by

• get the next image that will be display
• put DIV that contain other three DIVs over the slider.

<div class="animateNextImage">
    <div></div>
    <div></div>
    <div></div>
</div>

• set the next image as a background-image to each of these three DIVs.

$(".animateNextImage div").css('background-image', "url('"+ nextActiveImg +"')");

Then start to animate each background to achieve the animation you want.

.animateNextImage div{
  width: 33.3333%;
  float:left;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: -100% 0%;
  transition: background-position 0.5s ease;
}
.animateNextImage.active div:nth-child(1){
  transition-delay: 0.4s;
  background-position: 0% 0%;
}
.animateNextImage.active div:nth-child(2){
  transition-delay: 0.2s;
  background-position: 50% 0%;
}
.animateNextImage.active div:nth-child(3){
  background-position: 100% 0%;
}

See demo here: https://jsfiddle.net/IA7medd/odv4cshm/28/