<div class="slider">
  <div class="slider__item">
    <img src="https://images.unsplash.com/photo-1532186773960-85649e5cb70b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2071&q=80" />
  </div>
  <div class="slider__item">
    <img src="https://images.unsplash.com/photo-1647427060118-4911c9821b82?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" />
  </div>
  <div class="slider__item">
    <img src="https://images.unsplash.com/photo-1592085198739-ffcad7f36b54?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1935&q=80" />
  </div>
</div>
























































































<div class="bg" style="background-image:url(https://images.unsplash.com/photo-1529686342540-1b43aec0df75?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&h=1280)" />
body {
  overflow: hidden;
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.slider {
  position: relative;
  z-index: 1;
  height: 70vw;
  width: 100vw;
  overflow: hidden;

  &__item {
    position: absolute;
    z-index: 1;
    clip-path: polygon(-5% 0%,
    55% 0%,
    45% 100%,
    0% 100%);
    
    img {
      width: 100vw;
      height: auto;
      vertical-align: middle;
    }
  }
}






































































.bg {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  filter: blur(30px);
  transform: scale(2);
}
View Compiled
let index = 1
const speed = 2
const $slides = document.querySelectorAll('.slider__item')

const animate = () => {
  index += 1
  $slides.forEach((s, i) => {
    s.dataset.id = (index + i) % $slides.length
  })
  
  gsap.defaults({
    duration: speed,
    ease: 'power3.inOut'
  })

  gsap.to('[data-id="1"]', {
    clipPath: `polygon(
    -5% 0%,
    55% 0%,
    45% 100%,
    0% 100%
    )`,
  })

  gsap.to('[data-id="2"]', {
    clipPath: `polygon(
    55% 0%,
    100% 0%,
    100% 100%,
    45% 100%
    )`,
    onComplete: () => {
      gsap.set('[data-id="0"]', {
        clipPath: `polygon(
        0% 0%,
        50% 0%,
        50% 100%,
        0% 100%
        )`,
        zIndex: 0
      })
      gsap.set('[data-id="1"]', { zIndex: 2 })
      gsap.set('[data-id="2"]', { zIndex: 1 })
      animate()
    }
  })
}
animate()
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.co/[email protected]/dist/gsap.min.js