[](https://www.npmjs.com/package/bodymovin-progressively-load-on-scroll)
npm install bodymovin-progressively-load-on-scrollnpm install -S bodymin-progressively-load-on-scroll
`
html source code
`
class="animation"
src="animations/test.json"
animation-en=".class-name"
>
Source code
-------------
Javascript
`
function bodymovinAnimation() {
var scrollTop = $(document).scrollTop(),
windowHeight = $(window).height(),
indexList = [];
animations.each(function (index) {
var o = $(this);
if (o) {
var top = o.position().top;
if (scrollTop < top && scrollTop + windowHeight > top + (o.height() * 0.7)) {
var anim = bodymovin.loadAnimation({
container: this,
renderer: 'svg',
loop: false,
autoplay: true,
path: o.attr('src')
});
indexList.push(index);
}
}
})
for (var i = indexList.length - 1; i >= 0; i--)
animations.splice(indexList[i], 1);
}
$(document).ready(function () {
// run
animations = $('.animation');
$(document).bind('scroll', bodymovinAnimation);
bodymovinAnimation();
});
`
html
Demo
-------------
npm run start
open page http://localhost:8000`