Streaming live at 10am (PST)

My JSON is not working on Webflow

Hi All!

Hope you all are having a great start to your week.
I am working with a JSON file to achieve an interactive website like below:

But, I encountered my JSON file freezing and not working on my Webflow site.
When I try to test it on Preview Lottie Animation Live - Drawer it works great.
How could I fix this issue?

https://preview.webflow.com/preview/video-tester-wf?utm_medium=preview_link&utm_source=dashboard&utm_content=video-tester-wf&preview=c908f4456939e961dd03111d26674757&mode=preview
here is a tester website. The first big Lottie file frozen and not working is the file we need and the two vector-based JSON are tests I did to see how JSON is supposed to work.

Please help me with this issue. Thank you.

Here is my public share link: LINK
(how to access public share link)

Unfortunately no amount of tweaks are going to make this Lottie file work like the example site. The file you’re using is over 120MB which is absolutely colossal:

image

I took a peek at the example site and it’s using a different method to control the scroll-based animation which involves scrubbing a video file:

image

This method is really the only option if you’re planning on using image heavy Lottie files as—even with a lot of compression on each image—the file size will be much larger than a compressed video file. This is what Apple uses for any of the complex scroll interactions on their landing pages.

I’ve included a link below that covers a few different ways to go about it and give you an idea on how this would be utilized, but keep in mind any of these methods would require some custom code:

https://www.ghosh.dev/posts/playing-with-video-scrubbing-animations-on-the-web/

Sorry I couldn’t give you a better answer or quick fix in terms of utilizing Lottie, but hopefully the link above points you in the right direction towards a solution :+1:

Hi Mike,

thank you so much for your reply!
I have been trying to find someone who could explain this kind of interaction for so long.
So instead of using Lottie, I should use video?
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?

Are there any ways to achieve this effect in Webflow?

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:

https://codepen.io/ozywuli/pen/JvEeXV

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.

Thank you, Mike!
Unfortunately, I am not a coder but I could try to piece them together if I find something online.

One more question. Would there be any recommendation for the video hosting site to add to Weblfow? I am assuming adding it to Vimeo or YouTube and embedding is not really an option to achieve that interaction.

I know Dropbox offers 2GB free and they will provide you with a direct link to your files, so I’d give that a try first as it’s the best totally free option (I know about). Streamable is another option but their “free” tier is ad supported so you’d probably want to opt for their $12.99/mo plan if you go that route. Finally Vimeo does offer the ability to grab direct video files but it’s only for their Pro or higher plans and these start at $20/mo but require annual billing.

In all honesty I normally only need to work with YouTube/Vimeo hosted files so this is fairly uncharted water, so let me know how the options above go!

Thank you Mike! I will try using video embed!