Lottie Animation to happen only when an element scrolls into view

I want my lottie animation to play only once when an element is scrolled into view and then stay at the last frame when the element scrolls out of view and then remain at the same frame throughout the scrolling of the page (also when the element is scrolled back into view)

Please help.

Check this, duplicate the site to see how its made:


Read only: https://preview.webflow.com/preview/sbx?utm_medium=preview_link&utm_source=designer&utm_content=sbx&preview=d91efb276cd351eb16ffb217cf8e136e&pageId=5ee8956443f334547b848919&mode=preview