Back to overview

Generate high-quality animations with decreased loading and shipping time.

A strong product or service prioritizes the user experience. Incari Studio 2023.1 provides the tools to help you build engaging high-quality Human Machine Interface solutions. In this blog post, we go over employing dynamic elements and elevating your UI design with Lottie file formatting.

Making a lasting impression through animation

Strong user engagement is the key to understanding users and building a loyal audience. For every brand, company, and product this is a struggle. One way to create a higher level of engagement is by using dynamic elements in UI design, such as animations. This powerful tool can allow you to showcase your brand personality and create small but impactful interactions that stand out to audiences. Visual cues and animations can serve as a guide or highlight features of your UI. For example, with a progress bar or an animation to indicate success you create a tailored experience.

The Journal of the Association for Information Systems study on the Effects of Animation on Attentional Resources of Online Consumers concluded that dynamic elements increase user enjoyment and time spent on a page. When it comes to animation implementation there is one problem many designers and developers encounter – performance and efficiency. That is where Lottie comes in.

Incari Studio 2022.2 Lottie Implementation

From a dinosaur to a puppy

GIF, video and image sequences, and more. There are multiple ways to export your animations, but with problems such as limited color availability and compression, they are likely to become low-quality and unscalable.

Lottie, developed in 2015 by Hernan Torrisi, is a file format that significantly decreases file sizes, loading, and shipping time while keeping the best possible quality. Named after Charlotte Reigners, a German silhouette animation pioneer, Lottie is a JavaScript Object Notation (JSON) based animation file. This file format mixes vector raster elements and applies the animation at run time. Lottie is supported by many great design tools such as After Effects, Figma, and Canva. Why else do we think Lottie is great?

  • Small file sized
  • Increased loading speed
  • Scaling without pixelation
  • Easy to edit and convert into code
  • Access to a large library of animations online

Incari Studio and Lottie

With Incari Studio 2023.1 we ensure better animation quality, support for a broader range of file sizes, and time-based rendering for precise animation timing. Our system also now assesses whether the destination can handle the animation’s size and quality, making your workflow even smoother.

Implementing your Lottie animations in Incari remains straightforward. Add your Lottie animation to the Asset Manager and create a Lottie Sprite. Then, drag the file into the Attribute Editor from the Asset Manager. For more details on this process with our enhanced Lottie support, check our updated documentation, here.

For more information on how to import and place Lottie animations in your project, you can check out our in-depth documentation article on Lottie, here.

From documentation to implementation

Lottie is a format that focuses on seamless project handoffs and easy implementation for developers. Create your animation with the design tool of your choice, and export your file as a Lottie to utilize dynamic elements for your interfaces.

Start playing around with Incari Studio 2023.1 with our 30-day free trial. Interested in purchasing a license for you and your team? Reach out to our sales team for more information on our enterprise plan.