Integrating Lottie web animations for better UX in Java apps

When building useful applications, things like animations are typically the last thing to think about. They all seem like extra work away from solving the “real problem.” Yet, we all know that they enhance the user experience by making interactions smoother and more intuitive. 

I’ve always been intrigued by the idea of adding more visual appeal to our applications—not just for aesthetics, but because it enhances user satisfaction. Well-designed animations can make the application more enjoyable to use, which ultimately leads to better engagement and positive outcomes. That’s the kind of experience we want to create.

Have you heard of Lottie? It is a lightweight open source solution that allows developers to add high-quality, scalable animations using simple JSON files. Created by Airbnb, it allows developers to easily integrate animations created in Adobe After Effects into mobile, web, and desktop applications. There is a huge ecosystem around it, and you can find a lot of good animation examples at LottieFiles.

Random tip: If you have an iPhone, you can just search for “Lottie” in settings, and you will find a lot of applications crediting different open-source Lottie players for some part of their UI.

Let’s explore how to combine Java, Lottie, and Vaadin to bring professional interactive animations to your web applications.

Start with a good user experience

We all have seen that the lack of visual feedback during data loading and processing can lead to confusion. But there is more to animations than loading indicators. Here are some additional ideas: 

• Animate navigation to make them more intuitive. Small animations in buttons, icons, or form elements—like a button changing color on hover or a checkbox smoothly transitioning when selected—provide immediate feedback on user actions.
• Highlight new features in the user interface when the application is updated. Helps learning by allowing users to see new features in place and learn at their own pace.
• Draw attention to important background jobs and processing. In data-intensive applications, animations can illustrate changes in charts, graphs, or dashboards—such as animating the growth of a bar chart when new data is added or highlighting trends over time.

So, how can you add meaningful animations that enhance user experience while staying within the familiar territory of Java programming?

Options and implementations

You might sometimes be overwhelmed by all your choices when it comes to open source. Lottie is no exception, and since it began as an internal tool, there have been several variations of the file format and the player component. 

Here are the main options when thinking of using Lottie in the context of Java applications using Vaadin Flow:

Since there are npm packages you can use them in Vaadin Hilla applications as-is, and when integrating with Vaadin Flow a small wrapper component is good to have.

Lottie wrapper for Vaadin Flow 

I wanted to make a small LottieComponent that can play animations from lottiefiles.com that I load from the local server. The player's web component version makes sense for Vaadin Flow and Hilla, so I started with that. Also, dotLottie makes much more efficient files, which is always important. You can find more information about web component integration in our documentation.

Here is my simplified version of the LottieComponent.java

@Tag("dotlottie-wc")
@NpmPackage(value = "@lottiefiles/dotlottie-wc", version = "0.2.21")
@JsModule("@lottiefiles/dotlottie-wc/dist/index.js")
public class LottieComponent extends Component {

    public LottieComponent(String animationPath, boolean autoplay, boolean loop) {
        getElement().setAttribute("src", animationPath);
        getElement().setAttribute("autoplay", autoplay);
        getElement().setAttribute("loop", loop);
        getElement().setAttribute("background", "transparent");
    }

    public void play() {
        getElement().executeJs("this.dotLottie.play()");
    }

    public void pause() {
        getElement().executeJs("this.dotLottie.pause()");
    }
}

You can see how I load a web component implementation in Java and make it accessible to the rest of the application. This is mostly Vaadin Flow magic, which involves installing the web component Npm package and wiring it up to the Java class. Here, we expose only two methods to our Java application to play and pause the animations, but for completeness, you could make all of them available the same way.  

Next, I downloaded one animation from lottiefiles.com in the recommended (=smallest) format and put that in the Java project's main/resources/static folder. You have few options where to put them based on what kind of project you have.

After these steps, using the animations in your Vaadin Flow is simple. Just create an instance of animation with the correct resource file and parameters and play it when needed.

Conclusion

In 2024, the Lottie Animation Community was established to standardize the file format, and animations created or exported from different tools will behave the same way across all compliant players. This is good news for people, both creatives and developers, and I hope to see these subtle or even fancier Java applications in the future. 

What are your ideas for using animations in a helpful and non-intrusive way? You can explore the source code on GitHub and check out the live demo at lottie-vaadin-demo.fly.dev. See you in the Vaadin forum!

Ps. Do you know Lottie and how to build animations? Do you want to contribute to Vaadin? I could not find any Vaadin-related animations on lottiefiles.com. That is unfortunate; we have such a cool logo and symbol to animate }>.