Help with multiple triggers

[markzz]

I'm struggling to get the desired effect. I've created a 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?

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

[GSAP Helper]

Hey there @markzz,

 

Welcome to the forums and thanks for putting together a demo. 

 

We love helping with GSAP-related questions, but unfortunately the team here just don't have the resources to provide free general consulting or logic troubleshooting. Of course anyone from the community is welcome to jump in with assistance if they'd like - we just want to manage expectations.  

 

As you mentioned - maybe a consultant can help you out. You can post in the "Jobs & Freelance" forum for paid consulting from the GSAP community, or contact us directly. 

[Cassie]

You'll have more help getting assistance if you focus on one issue at a time and cut the demo down to the bare minimum necessary for your question. Maybe just one Lottie animation?

I think the key here is that you don't want it to scrub, you just want it to trigger at a certain point? I also imagine there's an option to just play from one frame to another - but that would be a question for the Lottie forums, not here - Lottie isn't a GSAP product.

 

Hope this helps!