Как вызвать функцию при прокрутке

Question

У меня есть несколько анимаций, которые я хочу активировать, когда прокручиваю определенную точку на странице.

Я не думаю, что у меня есть правильный синтаксис для вызова моей функции анимации со свойством scrollTop. Я проверил это с предупреждением, и он работал нормально.

var illustArr = ['map', 'privacy', 'payment', 'rewards', 'security', 'passcode'];
var illust;

function addListenerToElement(e, anim){
    document.getElementById(e).addEventListener('mousedown', function() {
    anim.play();
    anim.addEventListener('complete', function(){anim.goToAndStop(0,true)});
  }
)};

function buildIllus(){
for(var i=0;i<illustArr.length;i+=1){
    illust = document.getElementById(illustArr[i]);
    var params = {
        container: illust,
        autoplay: false,
        loop: false,
        animationData: animations[illustArr[i]],
        renderer: 'svg'
    };

    var anim = bodymovin.loadAnimation(params);

    illustArr.forEach(function (e) {
      addListenerToElement(e, anim)
      })
}
};

window.onscroll = function() {myFunction()};

function myFunction() {
if (document.body.scrollTop > 50) {
    anim.play
}}

buildIllus();

Спасибо

Answer 1

Я знаю, что это довольно старая тема, но у меня была та же проблема, и я не мог найти ответ нигде. Я решил эту проблему благодаря вашему примеру, поэтому решил поделиться ответом. Может быть, это будет полезно кому-то, кто ищет то же самое!

Во-первых, я предположил, что анимации в HTML имеют один и тот же класс, но имеют разные идентификаторы - я сделал так, чтобы идентификатор совпадал с именем файла анимации (т.е. animations/privacy.json, идентификатор DOM "privacy", имя анимации "privacy").

О, и я использовал Лотти, но это то же самое, что и Бодимовин.

HTML:

<div class="animation" id="privacy">

JS:

var animationsArray = ['map', 'privacy', 'payment', 'rewards', 'security', 'passcode'];
    var anims;

    function buildAnimations(){
        for(var i=0; i<animationsArray.length; i++) {
            anims = document.getElementById(animationsArray[i]);
            var animationPath = "animations/" + animationsArray[i] +  ".json";
            var parameters = {
                container: anims,
                renderer: 'svg',
                loop: false,
                autoplay: false,
                path: animationPath,
                name: animationsArray[i]
            };

            var anim = lottie.loadAnimation(parameters);
        }
    }

    var animationPosition = function() {
        var winTop = $(window).scrollTop(),
        pageAnimation = $('.animation');

        pageAnimation.each(function(index) {
            var animationID = $(this).attr('id');

            if($(this).offset().top <= (winTop + 450)) {
                lottie.play(animationID);
            }
        });
    };

    buildAnimations();
    window.addEventListener('scroll', animationPosition);

Answer 2

Может измениться anim.play в anim.play()?

function myFunction() {
    if (document.body.scrollTop > 50) {
        anim.play(); // this line
    }
}