Add support for dotlottie format lottie animations

[AmitSingh12345678]

Is your feature request related to a problem? Please describe.
For now, we are using dotjson format lottie animations which takes quite a time for fetching(remote lottie files) and rendering lottie files. As dotlottie format lottie files are quite small as compared to dotjson format lottie files(upto 80%), hence it will help in improving the performance of the app and reducing app size.

Describe the solution you'd like
Add support for dotlottie format lottie files.

Describe alternatives you've considered
There are some packages I have found which support dotlottie format lottie animations, but none of them are fulfilling our requirement as either some have large package size or some are not maintained.
Some alternative packages i have checked:
@dotlottie/player-component (Problem: large package size)
@johanaarstein/dotlottie-player

Also these above packages only support dotlottie format lottie files, not dotjson format lottie files.

It will be really helpful if you add support for dotlottie format lottie files, as it will really help a lot of people in improving the performance of app and reducing app size.

[theashraf]

@AmitSingh12345678

I'd like to recommend the official dotlottie react player, which can be found here: https://www.npmjs.com/package/@dotlottie/react-player
It supports both dotlottie and lottie json formats, and also offers advanced features such as multi-animation support, interactivity, and theming. Plus, it's optimized for a smaller bundle size which should help in improving the performance and reducing the app size as you mentioned.

It might be a good solution for your requirements.

[AmitSingh12345678]

@AmitSingh12345678

I'd like to recommend the official dotlottie react player, which can be found here: https://www.npmjs.com/package/@dotlottie/react-player It supports both dotlottie and lottie json formats, and also offers advanced features such as multi-animation support, interactivity, and theming. Plus, it's optimized for a smaller bundle size which should help in improving the performance and reducing the app size as you mentioned.

It might be a good solution for your requirements.

@theashraf

Thankyou for the quick response. The package you have mentioned seems good, but it's unpacked size is around 2mb, while the package i am currently using for displaying lottie files(dotjson format) has size around 230kb.
Is there any way to reduce the size of the package you mentioned?

[Gamote]

Hey @AmitSingh12345678, thank you for the input, I will keep it in mind for when we release the version 3. 🌊

[AmitSingh12345678]

Hey @AmitSingh12345678, thank you for the input, I will keep it in mind for when we release the version 3. 🌊

@Gamote
What's the ETA for release of version 3?
It will be helpful for us to plan accordingly.

[Gamote]

@AmitSingh12345678 In the spirit of full transparency I must say that the last piece is the interactivity, no contributor has any available time. So we are considering releasing the version 3 in 1 month without the interactivity and after that focus on it.

[theashraf]

@AmitSingh12345678
I'd like to recommend the official dotlottie react player, which can be found here: https://www.npmjs.com/package/@dotlottie/react-player It supports both dotlottie and lottie json formats, and also offers advanced features such as multi-animation support, interactivity, and theming. Plus, it's optimized for a smaller bundle size which should help in improving the performance and reducing the app size as you mentioned.
It might be a good solution for your requirements.

@theashraf

Thankyou for the quick response. The package you have mentioned seems good, but it's unpacked size is around 2mb, while the package i am currently using for displaying lottie files(dotjson format) has size around 230kb. Is there any way to reduce the size of the package you mentioned?

@AmitSingh12345678, while the total unpacked size of the dotlottie player is around 2MB, the minified bundle size is actually just about 105KB. Remember that not all the files from the 2MB are going to be loaded into your bundle. Instead, only the relevant chunks will be included, based on the specific features of the dotlottie player you utilize.

For a better understanding, you can review the bundle sizes on https://bundlephobia.com/package/@dotlottie/[email protected] or even test the package out yourself. Hope this helps! :)

Additionally, you can check out the dotlottie playground and inspect the bundle size of the player directly from the network tab in your browser's developer tools.

[AmitSingh12345678]

@AmitSingh12345678
I'd like to recommend the official dotlottie react player, which can be found here: https://www.npmjs.com/package/@dotlottie/react-player It supports both dotlottie and lottie json formats, and also offers advanced features such as multi-animation support, interactivity, and theming. Plus, it's optimized for a smaller bundle size which should help in improving the performance and reducing the app size as you mentioned.
It might be a good solution for your requirements.

@theashraf
Thankyou for the quick response. The package you have mentioned seems good, but it's unpacked size is around 2mb, while the package i am currently using for displaying lottie files(dotjson format) has size around 230kb. Is there any way to reduce the size of the package you mentioned?

@AmitSingh12345678, while the total unpacked size of the dotlottie player is around 2MB, the minified bundle size is actually just about 105KB. Remember that not all the files from the 2MB are going to be loaded into your bundle. Instead, only the relevant chunks will be included, based on the specific features of the dotlottie player you utilize.

For a better understanding, you can review the bundle sizes on https://bundlephobia.com/package/@dotlottie/[email protected] or even test the package out yourself. Hope this helps! :)

Additionally, you can check out the dotlottie playground and inspect the bundle size of the player directly from the network tab in your browser's developer tools.

Got it, thanks for helping 🙂