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, 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.

• 

• 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

• 

• 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.

   • 

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.

   • 

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.

   • 

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!