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?
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.
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 ascroll
/seek
event. Is this possible?Something where I could combine:
and
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 myvisibility
parameters?If I do a single-pixel scroll:
that will fire it, but I feel like I shouldn't have to do that.
Thank you!