Jump to content
GreenSock

markzz

Implementing a lottie/greensock build

Recommended Posts

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×