Как сделать анимированную подгрузку элементов?

Question

[artur012097]

Как сделать поэтапную анимацию появления элементов при скроле через JS? Желательно без использования готовых библиотек (но не мешает) и чтобы соседниь элемент до конца анимации был фиксированным (не обязательно)?

Comments

[FeST1VaL]

а почему без библиотек? например GSAP наверняка бы вам помог)

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

Без библиотек придётся написать свое подобие библиотеки. Как некоторые пишут слайдер сами.

Answer 1

[Danny Arty]

Без библиотек, логично что вам придется писать свое решение.
Из библиотек есть wow.js например

Answer 2

[Иван Кулаков]

Можно через IntersectionObserver, например :)

if ('IntersectionObserver' in window &&
	    'IntersectionObserverEntry' in window &&
	    'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
		if (!('isIntersecting' in IntersectionObserverEntry.prototype)) {
			Object.defineProperty(window.IntersectionObserverEntry.prototype, 'isIntersecting', {
				get: function() { return this.intersectionRatio > 0; }
			});
		}

		var oObserver = new IntersectionObserver(function(entries, observer) {
			entries.forEach(function(entry) {
				if (entry.isIntersecting) {
						//  делаем анимацию (добавляем css-класс в котором настроены анимации)
						entry.target.classList.add('animate');
				}
			});
		});

		// вешаем observer на массив элементов
		arrayElements.forEach(function(elem) {
			oObserver.observe(elem);
		});
	}