How to trigger function on scroll

Question

I have a few animations that I want to trigger when I've scrolled past a certain point in the page.

I don't think I have the right syntax for calling my animation function with the scrollTop property. I tested it with alert and it worked fine.

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

Thanks

Answer 1

I know it's a pretty old topic, but I had the same issue and I couldn't find an answer anywhere. I worked the issue out thanks to your example, however, so I decided to share the answer. Maybe it will be helpful to someone else looking for the same thing!

First, I assumed the animations in HTML have the same class, but have different id's - I made it that id is the same as the animation file name (i.e. animations/privacy.json, DOM id "privacy", animation name "privacy").

Oh, and I used Lottie, but it's the same thing as Bodymovin.

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

Maybe change anim.play to anim.play() ?

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