Как сделать анимацию текста при смене слайда Swiper?

Question

[AlexWD]

Есть слайдер Swiper.
На каждом слайдере размещён текст который при загрузке страницы или при попадании в видимую область выезжает из левого края страницы. Но он это делает один раз и всё. Нужно что-бы на каждом слайде при смене слайдов анимация повторялась.
Собственно вот сам пример: Ссылка на сайт

Слайдер инициализируется так:

<script>
	var swiper = new Swiper('.swiper-container', {
	pagination: {
	el: '.swiper-pagination',
	clickable: true,
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	keyboard: {
		enabled: true,
		onlyInViewport: false,
	},
	autoplay: {
		delay: 5000,
	}
	});
</script>

Анимацию вызываю так:

const animItems = document.querySelectorAll('._animate');

if (animItems.length > 0) {
	window.addEventListener('scroll', animOnScroll);
	function animOnScroll() {
		for (let index = 0; index < animItems.length; index++) {
			const animItem = animItems[index];
			const animItemHeight = animItem.offsetHeight;
			const animItemOffset = offset(animItem).top;
			const animStart = 4;

			let animItemPoint = window.innerHeight - animItemHeight / animStart;
			if (animItemHeight > window.innerHeight) {
				animItemPoint = window.innerHeight - window.innerHeight / animStart;
			}

			if ((pageYOffset > animItemOffset - animItemPoint) && pageYOffset < (animItemOffset + animItemHeight)) {
				animItem.classList.add('_active');
			} else {
				animItem.classList.remove('_active');
			}
		}
	}
	function offset(el) {
		const rect = el.getBoundingClientRect(),
			scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
			scrollTop = window.pageYOffset || document.documentElement.scrollTop;
		return { top: rect.top + scrollTop, left: rect.left + scrollLeft}
	}

	setTimeout(() => {
		animOnScroll();
	}, 300);
}

Я знаю что у Swiper есть API slideChange, но в моём случае анимация не повторялась при смене слайдов.
Делал так:

<script>
				var swiper = new Swiper('.swiper-container', {
					pagination: {
					el: '.swiper-pagination',
					clickable: true,
					},
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
					},
					keyboard: {
						enabled: true,
						onlyInViewport: false,
					},
					autoplay: {
						delay: 5000,
					}
				});

				swiper.on('slideChange', function () {
					console.log('Слайд сменился'); // Оставил для проверки работает ли скрипт

						const animItems = document.querySelectorAll('._animate');


						if (animItems.length > 0) {
							window.addEventListener('scroll', animOnScroll);
							function animOnScroll() {
								for (let index = 0; index < animItems.length; index++) {
									const animItem = animItems[index];
									const animItemHeight = animItem.offsetHeight;
									const animItemOffset = offset(animItem).top;
									const animStart = 4;

									let animItemPoint = window.innerHeight - animItemHeight / animStart;
									if (animItemHeight > window.innerHeight) {
										animItemPoint = window.innerHeight - window.innerHeight / animStart;
									}

									if ((pageYOffset > animItemOffset - animItemPoint) && pageYOffset < (animItemOffset + animItemHeight)) {
										animItem.classList.add('_active');
									} else {
										animItem.classList.remove('_active');
									}
								}
							}
							function offset(el) {
								const rect = el.getBoundingClientRect(),
									scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
									scrollTop = window.pageYOffset || document.documentElement.scrollTop;
								return { top: rect.top + scrollTop, left: rect.left + scrollLeft}
							}

							setTimeout(() => {
								animOnScroll();
							}, 300);
						}
						});
			</script>

Если открыть консоль, то видно что вызов самого slideChange работает, а вот анимация не повторяется.

Могу предположить, что нужно подкорректировать сам вызов анимации, но как котелок не соображает.

Comments

[Антон Литвиненко]

такие сложности. почему б не написать ее на цсс и привязать к активному слайду?
вот пример как я делал
https://ajat.se/

[AlexWD]

Антон Литвиненко, Напишите как ответ, пусть он и не является точными скриптами, но Вы указали куда копать, плюс ко всему я изучил новые возможности анимаций CSS. Однозначно лайк. Спасибо огромное.

Answer 1

[Антон Литвиненко]

Используя css анимации и активный слайд
Допустим есть такой слайдер, он имеет hero-title и hero-list

@keyframes fadeInUpSD {
    0% {
        opacity: 0;
        transform: translate3d(0,15%,0)
    }
    100% {
        opacity: 1;
        transform: translate3d(0,0,0)
    }
}

.hero-slider .slick-active .hero-title.ajat-animated {
    animation: fadeInUpSD 1s both 1s
}

.hero-slider .slick-active .hero-list.ajat-animated {
    animation: fadeInUpSD 1s both 1.5s
}

Привязываем к классу активного слайдера, делаем задержки и что там нужно, все.
У меня еще есть класс ajat-animated, он позволяет из админки включать и отключать анимацию