Dear Webflow Support,
Currently:
You can only upload or replace the "standard json file" after adding the Lottie Animation to webflow check screenshot "lottie animation screenshot.png".
Hosting json-files in Webflow is amazing and control the frame-by-frame animation through webflows Lottie Animation element is amazing with the interactions-panel (for example animate thruogh scrolling) - as long as they are simple vector graphic based images - the json file will not be bigger as 20kb-100kb. BUT if you export a larger json file inlcuding photorealistic png's or webP's .. even though you compress extremly good and trying to keep a acceptable Resoution, you will get around 500kb - 1MB for a good resolution json animation.
So what i did: I hosted the json on a external CDN (bunnyCDN in my example) and tried somehow to implement it into webflow.
The only possible approach currently (approved from webflow support) is through embeded "<lottie-player>" and control the animation with the help of the lottie interactivity library through Javascript by following the steps on this page: https://lottiefiles.com/interactivity
So all that said, its especially for a no-code webbuilder hard for people new in the coding-world especially javascript and more to understand quickly how to build that embed player + animate through javascript.
The easiest solution would be to impelment in webflows lottie animation element in addition to the json upload also to insert a json link - which is hosted anywhere but publicly shared on any possible CDN platform.
That would be helping so much and simplify a lot.
Advanced Info:
For everyone who is also familiar with json files - if you export a json animation file from After Effects through the free extension "bodymovin" you whether exlude or include the png's inside the file. (which makes it larger of course if you include them)
Than i thought: Lets replace the "location-url" inside the json with the URL of the CDN" .. which worked amazing - the json file is 30kb size and the url are pointing on the 100 frames for the 2 sec animation hosted on a CDN. That works everywhere - Lottie-json player - normal pages .. even the animation was visibile when uploading on the webflows asset manager - which means its correctly set up - the URLS are perfectly reachable etc. But when putting the lottie animation in place and publish the page - i got a "broken image" on the page - why? Because website is replacing the prefix of that URL inside the json with the standard CDN webflow hosted link infront of my full accecable URL (which can be seen in the Networks tab of the devtools in chrome-based browsers) like a prefix. That leads to an error.
This could be all prevented by bein able to paste a cdn URL inside the lottie animation webflow element OR Webflow will remove that prefix - which is actually a understandable safety feauture.
Thanks for reading so far, i own you a cookie :-*
Andy Olga Gretzinger
.svg){kind=logo}
And BY THE WAY - I totally forgot to mention the main reason WHY not uploading a 1mb json to Webflows asset manager included all the png's .. that is super easy possible - but here comes the dealbraker: While building a landingpage or the first page - almost everyone of us is testing designs or making everything on the freeplan to check things out. After two days of developing that page and being extremly happy about that crazy awesome looking animation - i just jumped (for whatever reason i can't remember - since Website usage was never a deal on paid siteplans - just checking for website-optimized issues) into the website settings and saw that this 1MB animation which i used 4 times on 2 divs and 2 different animations for mobile - it consumed 435MB (check screenshot).
No problem .. just activate a siteplan would someone said .. yes no issues at all - but first of all its not the best for page-speed optimazation and second of all its not scalable. Having a few animations in place each sized 1MB approx would consume the bandwidth in seconds if the Traffic reaches higher amounts .. Even with the 500GB plan on webflows Business model.