dotlottie / dotlottie-js

dotLottie-js is the primary library for creating and abstracting dotLotties.
18 stars 4 forks source link

How to pack lottie json and required images into one dotlottie file with this? #32

Closed karthest closed 1 year ago

karthest commented 1 year ago

After reading README and https://docs.lottiefiles.com/dotlottie-js-external/, I'm still confused about how to get a dotlottie file. Could you please show an example ?

theashraf commented 1 year ago

Hi @karthest,

The .lottie file format is essentially a zip archive that adheres to a specific structure. You can find the detailed structure listed here: DotLottie Structure.

The dotlottie-js package is crafted to ease the creation of .lottie files in accordance with the .lottie standards. One of the powerful features of this package is the ability to combine multiple Lottie JSON files into a single .lottie file. What's more, you can play any of these animations in the dotlottie player, as it now supports playing multiple animations within a single .lottie file. For more details about playing multiple animations in a single .lottie file, please refer to the player-component package: dotlottie player-component.

Here's a practical example that you can run in Node.js to see how it all works: DotLottie JS Example.

As for image extraction, the dotlottie-js package expertly manages this internally by extracting images from the lottie.json animation and archiving them in the images folder within the .lottie file, aligning perfectly with the established .lottie structure.

Additionally, you may want to explore these further examples that illustrate various usage scenarios: DotLottie JS Usage Scenarios.

Feel free to experiment with the CodeSandbox example, and don't hesitate to reach out if you have any further questions!

samuelOsborne commented 1 year ago

Hey @karthest - Please check out our dotLottie playground to create .lottie files as well as multi-animation dotLottie files:

https://dotlottie.github.io/player-component/

Cheers!