Automatically play a 2nd lottie animation after first lottie animation completes

How might I trigger one lottie animation to play after another lottie animation completes?

Example:

  1. Lottie animation 1 is paused by default
  2. Lottie animation 1 plays while page is scrolling
  3. The page has been scrolled far enough so that lottie animation 1 is on it’s last frame
  4. Lottie animation 2 plays (not attached to page scroll or any interaction, lottie 2 plays automatically when lotto 1 enter it’s last frame)

Any ideas how I might approach this?

thanks!

Edited to add read only link (hacky version)

https://preview.webflow.com/preview/2024-cs?utm_medium=preview_link&utm_source=designer&utm_content=2024-cs&preview=855d1ba0fd111690be966aeb9e9f09cb&pageId=672a6f3d7d76c1390e2b455a&workflow=preview

  • Plays lottie 1 while scrolling
  • Plays lottie 2 when (other) element enters view
    this approach seems like it might cause problems with responsive layout that will be required once I build out the rest of the page.