Как сделать такую анимацию блока?

Question

[Vladislav]

пример wpdemo.archiwp.com/theratio/home-5
вот анимация этого блока слайда, при клике на кнопки или когда сам слайдер автоматически пролистывается происходит анимация


как ее реализовать с помощью чего, дайте пожалуйста наводку или приблизительно готовое решение, может кто сталкивался с таким
я сделал так, но при клике на кнопку слайд появляется и пропадает
слайдер - свайпер

let nextBtn = document.querySelector('.present .swiper-button-next')
let contentSlide = document.querySelector('.present__content-slide')

nextBtn.addEventListener('click', ()=> {
  contentSlide.classList.add('active-content-slide')
})

.present__content-slide
    opacity: 0
    visibility: hidden 
    transition: opacity, visibility 0.5s, 0.5s; 

.present__content-slide.active-content-slide
    opacity: 1
    visibility: visible
    transition: opacity, visibility 0.5s, 0.5s;

Answer 1

[Владимир Майструк]

сделай вместо transition: opacity, visibility 0.5s, 0.5s;
transition: opacity, visibility 0.5s ease;
и в классе .present__content-slide.active-content-slide убери трансишион