How to properly attach an animation in a JSON file to a website?

Question

JavaScript

I can pull the animation (2 hands applauding) from Figma as a GIF but then it will have an infinite loop.
And I want that there were 3 repetitions and that's it.
And if I even correct it and do 3 repetitions, then it just works out when the site loads and that's it.
Even the user cannot scroll to it (the section is already in front of the footer).
I have this animation in json format (file) but I just can’t find a human explanation in Google how exactly (and correctly) to attach it to the page (in the general js file somehow or separately connect).
As far as I understand, the js lottie library should also be screwed on. I would like to do it as simply as possible without loading the landing page. As much as possible.

Answer 1

Break the animation into frames and create a sprite, then use animation steps to run at the right time with the right number of repetitions.

Answer 2

Connect https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5...
Then in js:

var animationData = /* содержимое json файла */;
var container = document.getElementById('elementID');
var params = {
    container: container,
    renderer: 'svg',
    loop: 3,
    autoplay: false,
    animationData: animationData
};

var anim;
anim = bodymovin.loadAnimation(params);

And then you hang tracking the appearance of this elementID in the viewport and simply anim.play();andanim.stop();

Answer 3

If you just need animation, try writing it on canvas/webgl. or any library for creating games, the same phaserjs

Answer 4

So. A few days wasted due to my "green" knowledge of JS, although Sagrana @sagrana's answer turned out to be the most acceptable in my case. I am writing step by step how I implemented the animation when scrolling to it.
How to connect the lottie library, register the animation itself and connect it to my project, I took here - https://www.youtube.com/watch?v=Shd_Dms3P8I&t=349s
Connecting Lottie and animation point by point:
1. Go to the office. lottie repository: https://github.com/airbnb/lottie-web
2. Next along the path: build / player and select the desired version of lottie
3. Click on the desired version and download this file to my project by clicking on the "Raw" button.
The contents of the file will open. I right-click anywhere in this file and select "Save As" and save it to my project in the lib folder.
4. In html created a div with ID "lottie-test".
5. I include the downloaded lottie file before my main js file at the end of body