Как запустить анимацию, когда div попадает в viewport?

Question

[KarlosSatana]

Есть div, в котором присутствует небольшая анимация, но сам div спрятан отрицательным отступом и вызывается при клике на ссылку. Естественно при старте сайта, вся анимация проигрывается и при вызове того самого дива, её уже не увидеть.

Answer 1

[Сергей Горячев]

Вариант 1

$('a).click(function(){
  $('div').show().animate({
    // а тут анимация
  });
});

Вариант 2

$('a).click(function(){
  $('div').show().addClass('animate'); // класс, который анимирует блок
});

Вместо show() у тебя наверно css(), но это сути не меняет.

Answer 2

[Дмитрий Беляев]

Для отслеживания попадания элемента во вьюпорт есть IntersectionObserver https://developer.mozilla.org/ru/docs/Web/API/Inte...
Ну и саму анимацию стоит вынести в отдельный css класс, и вешать его, когда нужно запускать анимацию