search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.54k stars 2.87k forks source link

Bodymovin - Image URL instead of path in JSON file #2766

Open rejnold opened 2 years ago

rejnold commented 2 years ago

Hello wonderful people.

I'm using the Bodymovin plugin for AE and I have a question. Everything works, animations are beautiful, but the only thing which could be improved is the filesize.

In the first case, I export with the settings shown on Case 1.png. It produces 1 JSON file and the folder with the assets.

Case 1

Here are the files Bodymovin produces Case 1.zip

This situation for me is perfect because then I can treat the raster imagery with different compression tools (like https://tinypng.com/). Everything is great, the packed archive works on https://lottiefiles.com/preview, but not when we put it on Webflow. I realized that it's because Webflow keeps uploaded files on the cloud and the JSON file doesn't see the asset folder anymore.

Is it possible to use the URL address instead of the path in the JSON file? Simply replacing the path with the asset URL from Webflow doesn't work, unfortunately.

URL

The second case, which is what we currently have, is exporting with the raster assets embedded into the JSON file. It works well, but it's not ideal because the file size is significantly larger. I'm posting it here, just FYI, that we know about this option but would be great if I can make the first case work.

Case 2

Case 2.zip

Could you help?

Best regards, Paweł Mikołajek

bodymovin commented 2 years ago

hi, does this help? https://github.com/airbnb/lottie-web/wiki/loadAnimation-options#assetspath when you call loadAnimation, you can pass "assetsPath": "path to your assets".

Or you can manually change the "p" value to the full url as you did, and change the "e" value next to it from 0 to 1.

Any of those options should work.

rejnold commented 2 years ago

This is amazing. Thank you so much. Out of curiosity, what "e" stands for? The fact I haven't changed it previously made the whole difference.

bodymovin commented 2 years ago

it stands for external