How to make animated loading of elements?

Question

Processors

How to make a phased animation of the appearance of elements when scrolling through JS? Is it desirable without the use of ready-made libraries (but does not interfere) and that the neighboring element be fixed until the end of the animation (not necessary)?

Answer 1

2nd option.

Answer 2

Without libraries, it is logical that you will have to write your own solution.
From the libraries there is wow.js for example

Answer 3

You can use IntersectionObserver, for example :)

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);
    });
  }