Как настроить JS код для анимации?

Question

[Dezzzigner]

Задавал вот такой вопрос -
"Здравствуйте. Есть анимация Canvas сделанная в Adobe Animate CC, при загрузке страницы анимация воспроизводится автоматически и когда доходишь до неё, видишь только картинку с конечным результатом.
Как сделать чтобы анимация воспроизводилась только тогда, когда она попадает в поле зрения экрана?"

Получил в ответ код с припиской -
"У этой анимации есть функция запуска, вам надо ее отложить до момента появления блока в области видимости."

var $animationBlock = $('_selector_to_element');
var $window = $(window);

$window.on('scroll', function(){
  if ($animationBlock.offset().top >= $window.scrollTop()){
    // animation function
  }
});

Простите я "мягко говоря" дилетант в JS, можете написать что и куда подставлять?

Answer 1

[Анатолий]

Вы знаете где лежит и как выглядит код, который выполняет анимацию?
И как найти элемент в Html?

Comments

[Dezzzigner]

да

[Анатолий]

В присланном вам код вместо
// animation function - вставляете код js, который делаем анимацию
а вместо '_selector_to_element' - css селектор элемента который анимируется

Тут простая математика:
$animationBlock.offset().top - расстояние от вашего элемента до верха экрана
$window.scrollTop() - проскроленное пользователем расстояние.
Когда первое больше второго элемент начинает показываться.