Glad I could help shine some light on the subject! It’s definitely something that I find a lot of folks want to achieve with Lottie but realistically it’s not designed to (efficiently) handle these types of animations.
So instead of using Lottie, I should use video?
Correct, basically instead of having an image sequence you’d save out an optimized video that is advanced as the user scrolls down the page. There may be some additional tricks needed to “pause” the video for certain sections, but essentially your position on the page would be tied to the timeline of the video itself.
This isn’t necessarily an example that I think you need to mimic, but the Codepen below shows how a video can be mapped to the scroll position:
But I understanding is that Webflow doesn’t let us use huge video files on the Webflow site and there is no way of adding scroll based animation to a video right?
Correct, Webflow doesn’t natively handle triggering video scrolling with Interactions. I’d imagine your video file would need to be hosted elsewhere and then referenced in the project as opposed to uploading it directly as I’m not sure they allow that type of file upload (outside of background videos?).
Are there any ways to achieve this effect in Webflow?
Really the only limitation in Webflow is controlling what happens “server side”—custom code is totally possible and can be achieved assuming you are comfortable either writing your own or piecing together stuff that’s available online.