Swiper

CSS - example bits specific to the animation.css

// Elements exit at the same speed
.info span {
  opacity: 0;
  transition: opacity 1s ease;
}

.info .right button {
  opacity: 0;
  transition: opacity 1s ease;
}

// Elements animate in with offset delays when the active class is added
.swiper-slide-active,
.swiper-slide-duplicate-active {
  .info span {
    transition: opacity 1s ease 0.5s;
    opacity: 1;
  }

  .info .right button {
    transition: opacity 1s ease 0.7s;
    opacity: 1;
  }
}

HTML - the parallax attribute creates the masking effect.html

<div class="swiper-slide">

  <div class="image" data-swiper-parallax="80%">
    <img
      alt="{{ $feature['image_alt'] }}"
      sizes="80vw"
      data-src="{{ $feature['image_src'] }}" 
      data-srcset="{{ $feature['image_srcset'] }}" 
      src="{{ $feature['image_placeholder'] }}" 
      class="swiper-lazy"
    />
  </div>

</div>

JavaScript.js

import { Swiper, Navigation, Lazy } from 'swiper'

Swiper.use([Navigation, Lazy])

new Swiper('.buying-featured .swiper-container', {
  slidesPerView: 1.1,
  spaceBetween: 20,
  loop: true,
  parallax: true,
  loopedSlides: 2,
  threshold: 0,
  watchSlidesProgress: true,
  speed: 1000,
  lazy: {
    loadPrevNext: true,
    loadOnTransitionStart: true,
  },
  watchSlidesVisibility: true,
  navigation: {
    nextEl: '.buying-featured .swiper-button-next',
    prevEl: '.buying-featured .swiper-button-prev',
  },
  slideToClickedSlide: true,
  breakpoints: {
    850: {
      slidesPerView: 1,
      spaceBetween: 0,
      threshold: 50,
    },
  },
})