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

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/