LottieFiles: Download or Link to?

If you’ve been considering using Lottie animations in your projects you may be wondering whether you should link to the live file or download it and include it with your own project files.

There are huge advantages that come with linking to the file externally (download speed, preloading, and file size), so the below article will discuss what you should consider when making this decision. While it mentions LottieFiles.com specifically, it also discusses concepts and background knowledge that applies to other similar services. You can read about some of the options in my article about finding and using Lottie animations.

While this article doesn’t describe the approach, GitHub is a free alternative to using Lottie specific services for storing Lottie files, and it is more versatile in certain ways—You can learn more about that in my article Linking Lottie Animations from Github.

As far as user friendliness goes LottieFiles.com does a great job and provides lots of options – especially for those who don’t usually dive into code. It allows you to choose from various options and will write the necessary code snippet for you—which you can then simply copy and paste (Described in my article Using Lottie Animations).

The code snippets provided will link the animation used from its stored location on the LottieFiles website (rather than embedding it in your project files). This means your project will have a live link to, and ongoing dependency on, LottieFiles.com, and as of 2022, this option is only available if you upgrade to a LottieFiles paid subscription.

There are other alternatives, however, that still allow you to separate the Lottie file from the html file (such as storing it on GitHub or your own website hosting space), so it’s worth understanding a few things about the implications and risks associated with all of this.

Let’s consider a few questions…

1. Will your users have internet access?

This is the most basic question to start with, and it’s straight forward. If you’re creating a product that will be used offline, then any file linked from the internet won’t work. This isn’t likely to be relevant, however, as web based platforms that your file is running in will need internet access to function anyway. Feel free to hit me up on Twitter if you’re unsure about this though.

2. Can you trust an external link to remain valid?

Files linked from 3rd party sites you don’t control will mean you have no control over whether the link will keep working. If the company who hosts the file goes bust, or they decide to change the filename or folder structure, or simply delete the file, the link would stop working.

While this is possible, it shouldn’t be of high concern. LottieFiles promotes themselves as a service specifically for linking animation files from – this means they’re not going to reorganise anything and break your links. And if you’re considering Github, they’re trusted by millions of developers all over the world and aren’t going away anytime soon.

Since many of the animations you will link from LottieFiles are user uploaded, however, it’s possible for a user to have uploaded an animation, and after you’ve linked to it, that user then deletes it from their account. This is something to be weary of because the users of the service won’t be thinking about reliability in the way that the LottieFiles admins will be.

I reached out to LottieFiles on twitter about this and they confirmed that if a user deletes an animation, anyone who has linked to it will have a broken link. If this is of concern to you, they also recommended a solution; Instead of linking to the file directly, download it and then upload it to your own account in Lottie Files. You’ll still get the same benefits (somewhere to store those files and easy linking), but you will no longer be at the whim of that user.

For marketplace purchases on LottieFiles (Which are different to free files), I can’t confirm if the seller can just as easily delete their file, however, as a marketplace I would expect they’re set up to support the links in an ongoing way—but I’m guessing.

3. Could the external file be altered without you knowing?

One concern you might have is that you link to an animation and the user who uploaded it later changes that animation. In this instance the link won’t break, it may simply look different—Which should be a big concern.

Imagine creating a website for a client on which you include an animation of a laptop opening with the word “hello” on it. Then, after you finish the job and launch the site, the creator of the animation updates it to instead show pictures on the screen of who-knows-what… and your website still links to it.

This, however, is not a risk and it is not a possibility with LottieFiles.com. I confirmed this by uploading my own animation and found that while I could delete it, I could not change it. The previously mentioned workaround of re-uploading the file to your own account also prevents this from being a risk.

If you’re considering Github as your storage location, you will actually control the account and the file. This means that instead of being a risk, in this instance, it becomes an advantage. You would be able to modify the animation that is used in the live published file without having to republish it—Though you should obviously be careful you don’t break it yourself.

4. Which will be better for download speed?

Lottie animations are generally small in comparison to their equivalent video or gif files, however, complex animations can still amount to larger file sizes. In some authoring tools such as Articulate Storyline 360, however, it is by far more efficient and functional to store the Lottie file externally.

On a standard website project, if you use an animation in one page and then use it again on another, the user’s device only has to download it the first time, after that, it already has it in memory (Cached) and can show it instantaneously without further download usage. In Storyline, however, if you use the same animation on every slide, Storyline will include it as a separate embed each time – forcing the user to download it every time it shows.

In instances like this, linking to an external asset that is stored on LottieFiles or Github will provide great speed improvements. Instead of packaging the asset multiple times, Storyline will merely include the link to the asset multiple times; The asset itself will not be included. It will therefore be cached and only require downloading once, which means no matter how many slides you use it on, your project file won’t increase in size, and after the first slide, the LottieFile will will appear instantaneously on every slide.

In Summary

If you download or create a Lottie animation, use it with one of these methods…

• Simply include it in your file (Described in Using Lottie Animations).
• Upload it Github or a similar service and link to it in your file (Described in a future article).
• Upload it to your own LottieFiles account and pay to get a direct link.

The first two options are the most realistic seeing as they’re free. And of all 3, if you’re technically inclined, I’d go with the GitHub approach as on top of being free, it provides significant advantages when it comes to download speed and versatility. There’s a guide for at Linking Lottie Animations from Github.

That’s it!

I’d love to know if any of these articles helped you.
Share what you’re building or ask me a question on Threads or somewhere else.

Here are some other things you might like

• Extracting the extension from a filename string
• Register a new file type in Obsidian
• Transparent React Native iFrames/WebViews