Try ShortPoint nowIf you've ever wondered how websites and apps manage to have those smooth, lightweight animations that look crisp on any screen size, chances are you're looking at Lottie animations. And if you're ready to add some of that magic to your own SharePoint sites, LottieFiles.com is about to become your new best friend.
TABLE OF CONTENTS
- What is a Lottie Animation?
- Getting Lottie Animations from LottieFiles
- Step-by-step Tutorial
- Best Practices for Using Lottie Animations
- Why You Should Use Lottie Animations
- Frequently Asked Questions
What is a Lottie Animation?
Before we dive into the how-to, let's talk about what makes Lottie animations special. Lottie is an open-source file format that brings motion design and interactive animations to life. It works on different platforms such as web pages, mobile applications, and desktop applications.
The beauty of Lottie is that it's a vector-based format, which means your animations stay sharp whether someone's viewing them on a phone or a 4K monitor. Plus, these files are incredibly small; often just a fraction of the size of PNG sequences, GIFs, or video files. They're not only high-quality animations, but they also don't slow down your site.
You also don’t need to be a design expert to get these animations. With Lottiefiles.com, you can browse through thousands of animations that you can freely use:
The best part? With ShortPoint's Lottie Design Element, you can showcase these beautiful Lottie animations on your own SharePoint sites:
Getting Lottie Animations from LottieFiles
Getting started with LottieFiles is refreshingly straightforward. Here's how to find the perfect free Lottie animations for your SharePoint sites:
NOTEYou can now use the copied Asset link to add the animation to your SharePoint sites. For more details, check out How to Add Lottie Animation in SharePoint Using the Lottie Design Element.
Step-by-step Tutorial
This section explains how to download Lottie animations from LottieFiles.com.
Step 1: Browse the Library and Select an Animation
NOTEBefore proceeding, make sure you have a LottieFiles account. Creating a free profile allows you to retrieve the Lottie Asset link, which you need to add the animation to your SharePoint sites. Just sign up with your email or use a social login. Having an account also lets you save favorites and access premium content if you choose to upgrade later.
- Head over to LottieFiles.com and select My Dashboard.
- Scroll down until you see Free community animations and click View More.
- You will be redirected to a new page.
Step 2: Open Animation
- Use the search bar if you know what you're looking for, or browse the selection to get inspired.
- Once you've found an animation you love, click on it to open the detail page.
- Go to the Asset & Embed tab.
- Click Save to workspace.
- Choose the folder you want to use.
- Select Save.
- Then, click Open. You will be redirected to the editing page.
Step 3: Copy the Asset Link
NOTEIn the edit page, you can customize the animation to your liking. But, for this guide, we’ll keep the animation as is.
- Click the embed icon.
- In the Handoff tab, toggle on Enable asset CDN.
- Copy the Asset link.
Great work! You now know how to get free Lottie animations. You can now use the copied Asset link to add the animation to your SharePoint sites. For more details, check out How to Add Lottie Animation in SharePoint Using the Lottie Design Element.
Best Practices for Using Lottie Animations
Now that you know how to get Lottie animations, let's talk about using them effectively. A poorly implemented animation can do more harm than good, so here are some tips to keep in mind:
- Keep it purposeful. Animation should enhance the user experience, not distract from it. Use animations to guide attention, provide feedback, or add personality—but avoid animating just for the sake of it.
- Mind the file size. While Lottie files are generally small, complex animations with lots of layers can still add up. Aim to keep your animations under 100KB when possible. LottieFiles shows you the file size before download, so pay attention to that number.
- Test on actual devices. What runs smoothly on your development machine might stutter on a mid-range phone. Always test your animations on the devices your users will actually be using to ensure an engaging user experience.
- Provide fallbacks. Not every browser or situation will support rendering Lottie perfectly. Have a plan B, whether that's a static image or a simplified animation. The Lottie Web library handles this pretty well, but it's worth considering.
Why You Should Use Lottie Animations
You might be wondering if it's worth adding another tool to your design process and development workflow. Here's why Lottie animations have become the go-to choice for so many designers and developers:
- Scalability without compromise. As a vector-based format, Lottie animations look perfect at any resolution. Your animations will be just as crisp on a Retina display as they are on a basic screen.
- Incredible file sizes. A Lottie animation that would be several megabytes as a video often comes in at 20-50KB as JSON files. Your users' data plans will thank you, and your SharePoint sites will load faster.
- Easy to implement. Integrating Lottie animations, especially to SharePoint sites, is super easy. All you need is ShortPoint's Lottie Design Element. With it, you don't need to be an animation expert to have amazing animations on your page. To learn more about it, check out How to Add Lottie Animation in SharePoint Using the Lottie Design Element.
- Runtime control. Unlike videos or GIFs, you can programmatically control Lottie animations—play, pause, change speed, or even scrub through frames based on user interaction. This opens up creative possibilities that other formats simply can't match, enhancing user engagement and interactivity.
Frequently Asked Questions
Are all animations on LottieFiles free to use?
Many Lottie animations on LottieFiles are free for both personal and commercial use, but not all. Each animation has a license clearly displayed on its page. Some are free with attribution, others are completely free, and some require a paid license. Always check before using in a commercial project.
Can I edit Lottie animations?
Absolutely. You can edit Lottie animations by changing simple properties like colors and speed directly on the LottieFiles website. For more complex edits, you'll need the original Adobe After Effects file (which some creators provide), or you can use the LottieFiles Editor, a browser-based tool for making changes.
How do I add a Lottie animation to SharePoint?
Use the Lottie Design Element. For more information, check out How to Add Lottie Animation in SharePoint Using the Lottie Design Element.
Do Lottie animations work on all browsers?
Lottie animations work on all modern browsers. This includes Chrome, Firefox, Safari, and Edge. For older browsers, you can provide a fallback image or GIF.
Are there performance issues with Lottie?
Generally, Lottie animations do not cause performance issues. However, extremely complex animations with many layers or effects can cause issues on lower-end devices. Keep your animations reasonably simple and always test on target devices.
Related articles:
