Control of scrolling with lottie animation

Hi guys.
I crated this page (read only) with Cinema 4D & After Effects
or under this link (live site)

The page have 2 Sections right now:
Section #1 - Black BG With Lottie Animation
Section #2 - White BG

Whats happening right now it’s when the user scrolling the Lottie animation is played but it’s keep scrolling to the white section and the user can’t see the whole animation.
what i want to happen it’s that first of all the user will finish to watch the animation in the 1st section
1% - 100% of the animation and just after that will be able to scroll to the white section.

I was trying to looking for some tutorials and unfortunately couldn’t find anything except an Example that i found in the Webflow Showcase in this website
But can’t really understand how to make it happen in my website.

I would like to get some help!
Thanks a lot.
Maor.