Как сделать чтобы анимация срабатывалась при скроле без библиотек?

Question

[ArtJH]

Есть например 8 одинаковых блока. Нужно чтоб при скроле на какой-нибудь из этих блоков срабатывалась анимация именно на этот блок, а другие ждали своего скрола.
Не могу понять, как написать универсальный код.
Вот как тут анимация border https://www.burgessyachts.com/ru

Ниже мой код, но он не правильный, так как при скроле на один блок, анимация срабатывается сразу на все

let element_point = $('.animate-here').offset().top;
	let element_animated = false;
	let animate_delay = 100;
	$(window).scroll(function() {
		if (!element_animated && $(window).scrollTop() + window.innerHeight > element_point + animate_delay) {
			element_animated = true;
			$('.animate-here').addClass( "animate" );
		}
	});

Answer 1

[ArtJH]

https://junnot.info/kak-dobavit-klass-elementu-ili...

Как сделать универсальный? Тут придется для каждого элемента прописывать

Comments

[Александр]

Все зависит от требований, если необходимо добавлять именно классы, а не генерировать анимации, верный выход - Intersection Observer API. Наблюдаем за каждым элементом, проверяем их intersectionRatio, на его основе добавляем\убираем классы.

[ArtJH]

класс который я хочу добавлять он как раз таки и отвечает за анимацию

Answer 2

[Александр]

Если необходимо сделать множество различных анимаций да и еще на события скролла, лучше использовать GSAP и ScrollMagic. Завалялось старое демо, с тех пор GSAP обновился.
А чтобы без библиотек код написать, надо понять как расположены элементы у Вас на странице (песочницу надо).

Answer 3

[Sagrana]

Вам надо проверять видимость блока на экране при скролле и запускать анимацию только на нужном блоке
пример