<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

html,
body {
  position: relative;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #101;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper {
  margin: auto;
  height: 90vh;
  width: 75%;
  user-select: none;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  visibility: hidden;
  background: no-repeat center / cover;
}

.swiper-slide:nth-child(1) {
  background-image: url('https://images.unsplash.com/photo-1566765790386-c43812572bc2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=640&q=80');
}

.swiper-slide:nth-child(2) {
  background-image: url('https://images.unsplash.com/photo-1491833485966-73cfb9ccea53?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=640&q=80');
}

.swiper-slide:nth-child(3) {
  background-image: url('https://images.unsplash.com/photo-1568152950566-c1bf43f4ab28?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=640&q=80');
}

.swiper-slide:nth-child(4) {
  background-image: url('https://images.unsplash.com/photo-1506891536236-3e07892564b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=640&q=80');
}

.swiper-slide:nth-child(5) {
  background-image: url('https://images.unsplash.com/photo-1559624989-7b9303bd9792?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=640&q=80');
}

.swiper-slide:nth-child(6) {
  background-image: url('https://images.unsplash.com/photo-1495360010541-f48722b34f7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=640&q=80');
}

.swiper-slide:nth-child(7) {
  background-image: url('https://images.unsplash.com/photo-1573865526739-10659fec78a5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8Y2F0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=640&q=80');
}

.swiper-slide:nth-child(8) {
  background-image: url('https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGNhdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=640&q=80');
}

.swiper-slide:nth-child(9) {
  background-image: url('https://images.unsplash.com/photo-1478098711619-5ab0b478d6e6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fGNhdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=640&q=80');
}

.swiper-slide:nth-child(10) {
  background-image: url('https://images.unsplash.com/photo-1511275539165-cc46b1ee89bf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDF8fGNhdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=640&q=80');
}

import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.esm.browser.min.js';
import anime from "https://cdn.skypack.dev/animejs@3.2.1";
const cols = 3;
const duration = 1000;

function updateClip(el, points) {
  const polygon = points.reduce((acc, val, i) => {
    const x1 = (100 * i) / cols;
    const x2 = (100 * (i + 1)) / cols;
    const y = val.t;
    acc.push(`${x1}% ${y}%`);
    acc.push(`${x2}% ${y}%`);
    return acc;
  }, []);

  polygon.push("100% 100%", "0% 100%");
  el.style.clipPath = `polygon(${polygon.join(",")})`;
}

const swiper = new Swiper(".swiper", {
  effect: "creative",
  speed: duration,
  rewind: true,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
  on: {
    init(swiper) {
      swiper.slides[swiper.activeIndex].style.visibility = "visible";
    },
    slideChange(swiper) {
      const slideEl = swiper.slides[swiper.activeIndex];
      const prevSlideEl = swiper.slides[swiper.previousIndex];
      const points = Array.from({ length: cols }, () => ({ t: 0 }));

      anime({
        targets: points,
        duration,
        easing: "easeInOutQuad",
        t: [100, 0],
        delay: anime.stagger(200),
        begin: () => {
          slideEl.style.visibility = "visible";
          prevSlideEl.style.visibility = "visible";
        },
        complete: () => {
          prevSlideEl.style.visibility = "hidden";
        },
        update: () => updateClip(slideEl, points),
      });
    }
  }
});