LottieFiles / lottie-interactivity

A small javascript library to enable interactivity with Lottie animations
https://lottiefiles.com/interactivity
MIT License
430 stars 55 forks source link

Possible to 'chain' together the `autoplay` and 'scroll' modes? #105

Closed gnpwdr-mike closed 1 year ago

gnpwdr-mike commented 1 year ago

Question 1:

I have background Lottie animation that I'd like to load at the top of my website. Ideally, it would autoplay frames 0-30 on page load, and then once the user scrolls, it would animate frames 30-90. So, I would be chaining an autoplay event with a scroll/seek event. Is this possible?

Something where I could combine:

mode: 'chain',
player: '#aboutHeroWave',
actions: [
  {
    state: 'autoplay',
    transition: 'none',
    frames: [0, 30]
  },
]

and

mode: 'scroll',
player: '#aboutHeroWave',
actions: [{
  visibility: [0.1, 0.8],
  type: "seek",
  frames: [30, 90]
}]

Providing a demo video below to show the animation in a couple of different states, and how I want to chain autoplay + scroll together.

https://user-images.githubusercontent.com/42449008/219465482-1da57735-2955-450a-a8ec-350707edd197.mp4

Question 2:

If Lottie is at the top of a website like in my example, and I wanted to just do a scroll/seek action, why doesn't the animation fire on page load if it's within my visibility parameters? 

If I do a single-pixel scroll:

$("html, body").animate({scrollTop: 1});

that will fire it, but I feel like I shouldn't have to do that.

Thank you!

github-actions[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.