Control Bodymovin animation on mouse scroll according to page height

Hi. sorry, but this is more of my technical limit rather than the bodymovin’s. but i have a question regarding something im trying to achieve.

I am trying to make my frame 1 of my animation at the top of my page, and final frame of animation at the bottom of a scrolling page. So when you scroll, the animation will animate and reach the last frame at the bottom.

I’ve manage to do the play on mousewheel part, but i cant figure out how to tie the start and end of animation depending on the height of the page.

here’s what ive done so far (scroll on right side of page): http://fariskassim.com/stage/bodymovin/v1/index_mod.html

`

var animData = {
    wrapper: document.getElementById('bodymovin'),
    animType: 'svg',
    loop: false,
    prerender: true,
    autoplay: false,
    path: 'data.json'
};
var anim = bodymovin.loadAnimation(animData),
    container = document.getElementById('bodymovin');
    contentid = document.getElementById('contentid');

animLoaded();

function animLoaded() {
    if (!anim.isLoaded) {
        setTimeout("animLoaded();", 1000);
        return;
    } else {
        attachScroll(anim, contentid, 50);
    }
}
function attachScroll(anim, contentid, speed) {
    var val = 0,
       totalDuration = anim.totalFrames/anim.frameRate*1000;

    if (contentid.addEventListener) {
        contentid.addEventListener("mousewheel", MouseWheelHandler, false);
        contentid.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
    }else{
        contentid.attachEvent("onmousewheel", MouseWheelHandler);
    }

    function MouseWheelHandler(e) {
        var e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        if (delta < 0) {
            if (val < totalDuration) {
                val += (Math.abs(delta))*speed;
            }
        }else {
            if (val > 0) {
                val -= (Math.abs(delta))*speed;
            }
        }

        bodymovin.goToAndStop(val);
    }
}

`

[fariskas]

sorry for the late replies. if you are referring to the one i did here: https://www.fariskassim.com/stage/typojanchi/old_v1/

you can view the source and the code for what you want is there in the script tags. but i’ll just repost it here:

    var anim;
    var elem = document.getElementById('bodymovin')
    var animData = {
        container: elem,
        renderer: 'svg',
        loop: false,
        autoplay: false,
        rendererSettings: {
            progressiveLoad:false,
            preserveAspectRatio: 'xMidYMid slice'
        },
        path: 'data.json'
    };
    anim = bodymovin.loadAnimation(animData);

    $(window).scroll(function() {

        // calculate the percentage the user has scrolled down the page
        var scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());

      
        console.log(anim.currentRawFrame);
     
        scrollPercentRounded = Math.round(scrollPercent);
       
        /*console.log( (scrollPercentRounded / 100) * anim.totalFrames );*/

        anim.goToAndStop( (scrollPercentRounded / 100) * 4000)
    });

Basically, i just measure the scroll position relative to scrollHeight of the scrollable div on the right in percentages. Then with this percentage, i just use it to ‘goToAndStop’ on the frame of the animation.

[nilooy]

hello, i want to apply this to my animation. Can you help me by sharing the code?