# How to Use Lottie Animations in OutSystems Lottie animations have revolutionized the way developers add high-quality, interactive animations to applications. These lightweight animations, stored in JSON format, can be seamlessly integrated into OutSystems to enhance user experiences without compromising performance or load times. In this blog post, we will cover what Lottie animations are, their advantages, and guide you step by step on how to integrate them into a **Reactive Web Application** in OutSystems. ## What is a Lottie Animation? Lottie animations are a versatile, JSON-based animation format that allows for smooth, high-quality animations across platforms, from mobile apps to web applications. Initially developed by Airbnb, Lottie has gained widespread adoption due to its simplicity and flexibility. The biggest advantage? Lottie files are small and scalable, meaning they don’t lose quality when resized and are ideal for use in modern UI design. ### Key Features of Lottie Animations: * **Multi-Platform Support**: Lottie animations can be embedded into iOS, Android, and web applications with ease, using platform-specific libraries. * **Small File Size**: Compared to GIFs or videos, Lottie animations are lightweight, resulting in faster load times and improved performance. * **Large Animation Library**: LottieFiles, the leading resource for Lottie animations, offers thousands of free animations that can be used or customized. * **Customizable**: The JSON format allows for easy editing of the animations to match your design needs, whether it’s color changes, speed adjustments, or other custom behaviors. ## Getting Started with Lottie Animations in OutSystems Before diving into the implementation, it's important to note that this tutorial is applicable to **Reactive Web Applications** in OutSystems. If you’re ready, let’s begin. ### Step 1: Access and Download Lottie Animations To integrate Lottie animations, the first step is to find and download an animation file in the correct format. Follow these steps: #### 1.1. Navigate to LottieFiles Visit [LottieFiles](https://lottiefiles.com/featured-free-animations), where you can find a large library of free and premium animations. It’s a great place to start if you’re looking for professional animations ready to be used in your projects. #### 1.2. Download the JSON Animation File * Once you find an animation that suits your project, click on it and choose the **JSON format** for downloading. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726488096486/fe197a14-5532-414e-b97f-0409a63acb88.png align="center") * Save the file to a location on your local machine. ### Step 2: Set Up in OutSystems Studio Now that you have the animation file, you can begin integrating it into your OutSystems application. #### 2.1. Install the Lottie Animation Component from Forge * **Go to Forge**: Open OutSystems Service Studio, navigate to the **Forge** tab, and search for **Lottie Animation**. [Lottie Animation Forge Component](https://www.outsystems.com/forge/component-overview/2914/lottie-animations-o11) * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726488045914/808141ed-e758-4bde-9370-a3caf0fea5f8.png align="center") * **Install the Component**: Once you’ve found the Lottie Animation component, install it into your environment. * **Manage Dependencies**: After installation, navigate to **Manage Dependencies** within your application. * Search for the **Lottie Animation** component that you just installed. * **Check all dependencies** related to this component, and click **Apply** to include it in your project. #### 2.2. Set Up the Lottie Animation in Your Screen Now, you’re ready to display the animation on your screen. Here’s how: 1. **Upload the JSON File**: * Go to the **Data Tab** and click on **Resources**. * Upload the Lottie JSON file you downloaded earlier into the resources section. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726488080871/3d3d345e-1e4c-441b-81c5-283d18991df4.png align="center") 2. **Add a Blank Container**: * Drag a **Blank Container** onto the screen where you want to display the animation. This will serve as a wrapper for the Lottie Animation Block. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726488124571/d0c19fc4-5403-4407-9694-27eef98c7f5e.png align="center") 3. **Insert the Lottie Animation Block**: * Inside the Blank Container, drag and drop the **Lottie Animation Block**. * In the Lottie Animation Block’s **properties panel**, link the uploaded JSON file under the **Animation Data** property. 4. **Configure the Animation**: * You can customize the behavior of the animation by adjusting the **autoplay** or **loop** settings, depending on your needs. * To control the **width** and **height** of the animation, set these properties in the **Blank Container** rather than the Lottie Block itself, which allows for more flexibility in your layout. 5. **Publish and Test**: * Once you’ve set everything up, click **Publish** to deploy your application. * Navigate to the screen where you added the animation, and you should see it playing smoothly as part of your application. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726488153566/c6ecae95-29b2-49df-b465-1fd47140aaff.png align="center") ### Conclusion Lottie animations are an excellent way to introduce visually engaging, responsive animations to your OutSystems application. With their small file sizes and multi-platform support, they are ideal for modern development workflows. By following this guide, you can easily integrate stunning animations into your reactive web applications, improving both user engagement and UI aesthetics. Whether you’re building mobile or web apps, leveraging Lottie animations is a simple yet powerful tool to bring your user interfaces to life. If you haven’t experimented with Lottie yet, now is the perfect time to explore its potential and elevate your applications to the next level!