Как воспроизвести Canvas анимацию в определённый момент скрола?

Question

[Dezzzigner]

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

Comments

[Владимир]

Есть событие onscroll, можно на него посадить определение виден сейчас ваш блок или нет. А остальные вопросы это в Help для Adobe Animate CC, дает ли он возможность сделать JS интерфейс для управления анимацией

Answer 1

[Александр Золотых]

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

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

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

Answer 2

[Dezzzigner]

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