Implementing a lottie/greensock build

[markzz 0 Likes (Newbie)]

I'm struggling to get the desired effect. I've created a codepen: 

See the Pen bGLmyWb by markzz2 (@markzz2) on CodePen

but the live page is here: https://www.senfino.ai/home-new-lottie/

 

The desired effect:

1. Scroll to the purple container and have it lock in the middle of the screen during the animation sequence
2. Play the lottie as such:
   1. Trigger animation sequence #1 (frames 1-100) -- downward motion on the scrollbar does nothing
   2. Once animation sequence #1 is done, play animation sequence #2 (frames 101-200) with the same logic as above.
   3. Once animation sequence #2 is done, play animation sequence #3 (frames 201-300) with the same logic as above.
   4. Once animation sequence #3 is done, resume scrolling on the page

Ideally scrolling back up through the page reverses the logic above. Super advanced mode would be allowing the user to scroll up mid-sequence and reverse the order.

 

Right now I have everything working except the scenes. Basically, the animation frames are tied to the scrollbar rather than autoplaying on their own, and that's not desired. The autoplay option is greatly desired. Any ideas on how to solve this? Consultants who can help?