Bringing websites and apps to life with Lottie.

If you know a little about animation, the chances are you have noticed Lottie files here and there. Lottie has become extremely popular in recent years, and there are plenty of great reasons for this – in fact, it’s something that we frequently use here at Radical because we have been able to achieve outstanding results for our clients through its use.

There are many different file types available to designers and developers working with animation; each kind has its own unique benefits, but we have been very impressed with the versatility and power that Lottie brings to projects. So, first things first, what is Lottie?

An introduction to Lottie

Named for German animation pioneer Charlotte Reiniger and developed in 2016, LottieFiles is used to produce the Lottie filetype. A Lottie file is a JSON-based animation file that is designed to be as easy to ship as static files are. JSON is a text-based rendering of animated JavaScript content that is easier and more accessible for animators to utilise.

Lottie files are also designed to be much smaller than other comparable formats, making them faster. Despite being faster, the files don’t compromise on quality at all – and they are known to be of extremely high quality despite their small size and relatively high speed. It’s not a surprise, then, that it has quickly overtaken other formats in its reach, influence and accessibility. These days, when you come across animation within web pages or apps, there is a high chance that the file will be in the Lottie format rather than in an older file type such as GIF.

The fact that Lottie files are rendered using text-based JSON gives them an unbeatable versatility and makes them capable of more than can be achieved with other formats such as GIFS and PNGs. One of the main differences between PNGs and GIFs, and Lottie, is that Lottie files can be edited directly within the text following the file’s creation. This continues to be an exciting prospect for people in the animation community, and LottieFiles encourages creative use of the format to push the boundaries of what this file type can offer.

How can Lottie be used?

Lottie can be used to create all kinds of animation on web pages and within apps. Animators can easily import and preview their work, which will generate code that makes it simple to integrate and implement within projects such as site builds. Technically, it’s entirely possible to create Lottie animations with little or no coding knowledge, and LottieFiles also has a downloadable library of animations that animators can customise to their preferences.

Where can Lottie be used?

Lottie files are ideal for use on mobile and desktop sites and apps. They can be used on any platform where you need small, fast animated files. Not only are they perfect for illustrating websites and apps, but they can also be used to create animated stickers in messaging apps. This means that in addition to web pages, apps and messaging platforms, they can also be used to animate some downloadable smartwatch clocks. When we say Lottie is versatile, we really mean it; it’s the perfect vehicle for a vast range of applications and produces excellent results wherever it is integrated.

Why choose Lottie over other file types?

There are many great reasons to choose Lottie over other animation file types because it is designed to counter the shortcomings of older file types and provide a modern, simplified yet highly effective and versatile alternative.

• Lottie can be used on any platform, including Android, iOS and the web, without needing any prior modifications to make it work
• LottieFiles makes it possible to blend vector and raster elements and apply run-time transformation
• Lottie facilitates a seamless and simplified animation process that makes communication between designers and animators more effective
• Animations can be quickly and easily changed via their text-based code
• The file sizes are tiny compared to PNGs and GIFs
• Small file sizes and text-based code mean faster rendering times on a page or in your app
• Lottie files can be scaled up or down without compromising on the image quality
• Animators can quickly generate code from their animations, making integration extremely quick and easy
• Animation elements and parameters can be exposed for use as targeting elements, making it easy to incorporate interactive features into your animations

Lottie also does a lot more than provide these valuable benefits to animators – websites and apps that feature animation are highly engaging and can be used as a tool to maximise conversions and generate interest in your digital properties. When animation is used to add value to your users’ experiences, it is possible to explain concepts and ideas more effectively and engagingly than text alone and brings your website and apps to life.

Branding and animation go hand in hand to present a desirable persona to your audience, one they will find engaging and relatable. Animation is not only a valuable tool to engage your audience; it can also be used to convey your brand story and ethos. It may not be a top priority for some website owners, but those that have seen the value of on-page and in-app animation have been able to benefit from a vast range of positive effects such as:

• Increased engagement rates and lower bounce rates because it keeps your users on your page
• Improved brand credibility
• Messaging conveyed through animation stays with the viewer for longer
• Lottie is extremely simple to modify, so you can make changes such as adding seasonal flair to your animations
• Animation improves UX by adding value to your pages and apps when used to inform or convey ideas
• Animation makes your brand more human and relatable
• Lottie animation is versatile and flexible enough to be used anywhere, from 404 pages to loading screens, to your most popular and highly visited pages
• Animation can be used to direct a users’ journey through your website or app
• Sparing use of animation does a great job of drawing users’ attention to specific parts of the page or app

Lottie is designed for diversity and inclusion

Accessibility, inclusion and diversity are all important considerations for anyone who owns or operates a website in this decade. These are extremely popular and important factors, and they’re only becoming more widespread and desirable with time. Mass appeal is vital for national and international companies looking to make their websites and apps more successful, primarily down to the ease with which they can be accessed.

f a user can see themselves or their ethos represented by a brand, they are more likely to spend time (and money) with that brand. Not only this, but animation can make informational concepts easier to understand and, therefore, more accessible to a broader audience. The strategic implications of using animation in this way can have a substantial beneficial impact for users and companies alike because it creates valuable experiences for people from all walks of life and can be used to empower users with accessibility issues. Some examples of accessibility issues that users often face and how they can be mitigated in conjunction with animated content are:

• Carefully plan colour schemes to be viewable by those with a colour vision deficiency
• Intuitive and straightforward navigation for people with visual and physical impairments
• Descriptions of animated content for people who use screen readers
• Integrated auditory prompts for individuals with visual impairments
• Animated explanations of concepts rather than audio-based explanations for individuals with hearing impairments

The beauty of animation is that, when done correctly, it is a boon for people with accessibility issues. While other file formats such as PNGs and GIFs are often considered time consuming and expensive, Lottie makes it much easier to quickly adapt your animated content to suit your audience, whether they have accessibility issues or not. Of course, inclusivity is not all about accessibility – it’s also about representation and relatability.

How can Radical make a difference?

Animation is a modern, highly versatile addition to websites and apps. As you can see, it provides a considerable number of positive outcomes for brands that incorporate it into their digital properties. If you are interested in taking your website to the next level in terms of engagement, accessibility, and brand identity and are intrigued about how animation can help you achieve these coveted goals, we can help.

Our dedicated team are experienced in using animation as a strategy and a storytelling tool. They will be able to use Lottie to capture the essence of your brand, bringing it to life and transforming it into something more interactive and engaging. It takes a careful approach to avoid going overboard with animation – something the Radical team understands and is well practised in avoiding.

We’re always open to new challenges, so if you need help discovering how Lottie can be used to bring your websites or apps to life in a way that benefits you and your users, call or email us for a chat.