Lottie vs GIF: Which Animation File Format to Go For?

24/03/2022
blog

GIFs have been around for quite some time. In fact, you can find them online everywhere due to the rapid rise in the popularity of memes. GIFs appear on social media platforms, blogs, and webpages to convey a message through a moving image, and mostly in a humorous way. However, being dated means that GIFs do not tackle the latest problems of today’s animation world. On the other hand, Lottie is relatively new and offers many never-before-seen capabilities in an animation file format.

Regardless, GIFs are still surviving, and Lottie is still penetrating. Comparing the two file formats can help us determine which one to lean towards next time we have an animation to export and run on our website. So, here is a Lottie vs GIF post to help you understand how these two file formats fare against each other! Before diving into the actual comparison, let’s see how they appeared on the scene.

Lottie vs GIF: What are they?

Graphics Interchange Format (GIF)

GIFs were invented by a computer scientist named Steve Wilhite in 1987 while trying to solve the downloading problem in a technology company “CompuServe.” He was not only successful in saving space but also provided a coloured image exchange format.

GIFs quickly became common on the websites, and soon in 1995, people discovered that GIFs could play several images in a loop, giving an illusion of a video. This exploded in the meme community, making Facebook and Instagram accept the file formats as well.

Today, GIFs are immensely popular on Reddit, Buzzfeed, and Tumblr. They appear as a soundless video that loops automatically, and people are using them to create memes, online animations, and web logos.

Lottie

Unlike GIFs, the Lottie file format is quite new, having been launched only in 2017.

Before Lottie, motion designers created their animations separately and handed them over to the developers. Having limited options meant that the developers either exported a poor-quality animation or coded it from scratch. Not only was this a tedious task, but it also compromised the quality and professionalism of the web pages.

Seeing the problem, the Bodymovin plugin was introduced to render animations at run-time in JSON file format. Engineers at Airbnb realized the immense potential of JSON animations, and they, with the lead animator Salih Abdul Kalim, introduced Lottie in 2017.

Today, Lottie carries implementation support of Windows, Andriod, IOS, QT, and Flutter. Websites prefer Lottie for their small size and preserved quality, and many Lottie animation-based platforms are emerging. One of them is Vidalgo, a community-curated specifically for animators, artists, and creators. Vidalgo is where artists can showcase their creativity, and beginners can customize animations. It is also an excellent place to find free animations, like gift cards for special occasions, greetings, animations that convey a message, and much more!

Lottie vs GIF: The Comparison

Lottie and GIFs are both web animation file formats. However, they differ in many ways. Let’s compare these two and see how:

Lottie vs GIF

Lottie

GIF

True Color RepresentationShows true coloursCompromises colour quality
File SizeVery small, often <50KbLarger, often 5Mb for 5-sec GIF
PixelationNot possiblePresent
FPSPreserves frame rate at all costMight cause frame loss
CustomizationsMany options availableMostly built from scratch
Transparent BackgroundBlended edgesJagged edges
VectorizationVectorized in space and timeBased on bitmaps
AdoptionsEmergingAdopted by mainstream platforms
InteractivityPossible with LottieNot possible with GIF

True Color Representation

Being there for a while, GIFs use some outdated means of compression, for example, dithering. It is a method of reducing the colours in the images, normally seen in the 8-bit GIFs, by creating an illusion of a third colour being present. This can create artefacts and discrepancies in an otherwise smooth image.

Lottie, on the other hand, being a vector-based file format, faces no compression losses and hence, does not compromise on colour quality.

File Size

One of the most distinguishing features of Lottie might be its size. File sizes are important for any website owner, developer, and animator. Smaller file sizes mean faster downloading speeds and reduced storage requirements. This means that as a website owner, you can add multiple animations to your website without worrying too much about the loading time or the bought-space in your plan. However, your page-load speed can be greatly affected by a larger file size.

Click on the animation for more options

Lottie animations provide you with these benefits because their file size is often less than 50 Kb. This is smaller than even a compressed GIF or PNG. Where a 5-second long GIF reaches about 5 MB, a Lottie file rarely ever reaches this amount of space demand. Hence, the number of animations you can load on your social media or web page becomes extremely limited with GIFs.

Pixelation

When it comes to GIFs, you need to handle a trade-off between image quality and page loading speed. Compressed GIFs often mess up backgrounds due to their binary channel alpha support. It means that GIFs pixels can either be see-through or entirely opaque; there’s no in-between. However, if you use the uncompressed GIF file, you need to handle a huge storage demand.

Apart from this, scaling up a GIF makes it blurry and loses its quality. This is because GIFs animate by using frames and pixels, while Lottie is a vector-based animation format.

Lottie’s animation file format suffers from none of these problems. They can not only handle gradients of colours quite well but also retain their quality whether scaled up or down. This is because every time a Lottie animation is re-sized, the coding at the backhand recreates the animation at the native resolution of the screen. Hence, with Lottie files, you get web pages that can never give an unappealing, pixelated animation to its viewers.

 FPS

Frames per second or FPS is a crucial concept in the field of animation. Lower frame rates cause the animations to lag, while higher frame rates demand very high hardware capacity. An animator chooses the desired frame rate upon creating the animation for the required degree of smoothness. Lottie preserves this frame rate at all costs. However, downloading and compressing GIFs might make them lose some frames. This can make a GIF file appear sluggish and unsmooth.

Customization

Lottie files are customizable at any point of their creation process and even after it. Users can tinker with an already exported JSON Lottie file to change its background colour, its running speed, or to edit its individual layers. GIFs, once created, tend to stay the same and have to be built from scratch.

Transparent or No Background

Often you require files that carry a transparent background. GIFs often show a jagged or sharp edge of the image when dealing with the alpha channel. However, Lottie tends to show smoother and more blended-in edges.

Vectorization

GIFs consists of bitmaps whereas Lottie files are vectors, making them a flexible format. GIFs, once created, are quite difficult to edit. Lottie files, on the other hand, are easier to edit and build from scratch as they appear like a programming language. For instance, GIFs have a fixed size, which means you can not modify them to fit a different interface. However, in Lottie files, you can modify the style attribute in the script to change their height and width easily.

Adoptions

When it comes to adoption and use, in the Lottie vs GIFs war, animated GIFs are a clear winner. You can find GIFs all over the internet. All the mainstream social media platforms, including Whatsapp and Facebook, support this file type.

However, Lottie files are still emerging yet some of the bigger platforms have successfully predicted their potential, for instance, WordPress offers a Lottie Plugin and Vidalgo offers a Lottie player to view and share Lottie files easily.

Click on the animation to open Vidalgo’s Lottie Player

Interactivity

Lottie file format allows engaging and interactive animations. Being similar to an HTML script or a piece of code, Lottie files are easily editable to add different types of interactive behaviour. Users can find Lottie animations that move with the cursor, synch with scrolling or morph into something else when clicked. GIFs have no such property.

Lottie vs GIF: Conclusion

Lottie files perform better than GIFs in almost every aspect. They have proper documentation and a streamlined workflow, allowing anyone to create them. However, they are still in the process of being adopted. Many social media platforms have not yet adopted Lottie, for example, Whatsapp stickers support GIFs but not Lottie. Similarly, Instagram and Facebook run GIF files.

In such cases, GIFs might be the only option. However, Lottie is supported by IOS and android, and page-building sites carry plugins to run Lottie files easily. This is where Lottie files is clearly a better option.

So, do you agree? In today’s battle of Lottie vs GIF, Lottie won fair and square!

Looking to peruse more? Read this blog on why Lottie might be the best animation format.

Other Posts

blog
Best Lottie Players, Plugins and Tools
30/04/2022
Lottie has revolutionized the world of animation. To give a very basic definition, Lottie is a file format specific for animations, much like GIF. Due to Lottie animations, users can now display high-quality animations without any problems, such as pixelation, large file size, or slow webpage loading speeds. A single Lottie file is many times […]
blog
Infographics Trends and Animated Infographics in 2022
23/04/2022
With the rise of social media usage, visual content is becoming more and more popular than mere texts. From informational videos to sending memes to your friends and family, visual content is what people love nowadays. A popular type of visual content is infographics- packed with information, made to be attractive to the audience. Want […]
blog
7 Best Lottie Marketplaces To Help With Your Projects
16/04/2022
The Internet has brought the world closer, and sharing information has become extremely easy in this day and age. Today, there are numerous methods that let you share information, from videos to text and infographics to images. One such method is the use of animations which gives lets you provide information in a highly expressive […]

Different Animation File Formats: Why Lottie Is The Best One?

12/01/2022
blog

Animation is the art of turning images and drawings into moving objects. Traditionally animations included hand drawings. These drawings were then photographed, and run in a film to make them appear moving. Innovation and technology have also revolutionized the art of animations. Resultantly, most of the animations today involve CGI (Computer-Generated Imagery).

What are animation file formats?

File formats define the way the information gets encoded and stored in a computer. Animation file formats use bits to store animations on a computer. There are many animation file formats available today. It is essential to choose a file format that is right according to your requirements, such as file size and quality. 

The different animation file formats

Let us take a look at some common animation file formats available today:

MPEG

Motion Picture Experts Group or MPEG is an animation file format that is known for producing high-quality animations. The format of MPEG has high compatibility with different browsers. It can run on multiple platforms, like quick time and windows media player and ensures high quality. Social media platforms like Whatsapp support these files, making them extremely popular.

AVI

AVI, also known as Audio-Video Interleave, is the animation file format launched by Microsoft in competition with Apple.  It has good image quality, and at the same time, its file size is big. However, it does not support chapters of videos, nor does it allow direct streaming. Although it has a high acceptance rate and is widely distributed due to the wide use of Microsoft Windows, its large file size makes it an inflexible format to use.

MOV

MOV is the quick time video format, developed by Apple. It is popular for editing and has little use for watching videos. A few multimedia playback programs support this format, and hence, it has a low acceptance rate for actual devices. It shows compatibility with platforms, like Windows platforms and Macintosh. It is also, sometimes, used to store video and movie files. Furthermore, MOV has alpha channel support, meaning MOV images have adjustable opacity. Since MOV files can go entirely transparent, these are excellent for embedding animations.

CSS

Cascading Style Sheets or CSS is an animation file format that allows transitions of animations from one style to another. They are flexible and easy to use. Along with that, being robust and well-running is also a key benefit of the CSS animation format. Cascading style sheets allow the browser to control the sequence of animations which helps in improving the browsing experience. It is a method sheet language that helps to do spontaneous changes. Although it reduces file size during transfer, different types of CSS (CSS, CSS1, or CSS3) sometimes confuse the browser. Lack of security also gives CSS a disadvantage. CSS works differently for everyone as it is different for every browser.

GIF

GIFs are the Graphics Interchange Format, initially launched in 1987. They are commonly utilized for animations and other purposes. GIFs have a small size and can enable transparent background allowing professional use of animations. They are better able to convey the message as they can show emotions and movements. At the same time, GIFs cannot be edited once coded. They also have a limited colour option restricting your creative options. Even though GIFs have a small size, they are dependent on internet speed and at times, display low quality. Furthermore, Animated GIFs are static images, supported by Whatsapp stickers and various other social media platforms. Hence, they are easy to share

SVG

SVG, also known as Scalable Vector Graphics, is an animation file format that was first launched in 1999. During the first decade of the twenty-first century, web browsers started to integrate and support SVG. It has a fast page load and doesn’t require an HTTP request to load it, enhancing the user experience. Furthermore, It has a text-based format and is scalable. It has a small size but, at the same time, is not detailed. And it doesn’t fully cross platforms as there are still users who have browsers that don’t support SVG, meaning that they can’t view SVG content.

SWF

SWF or the Small Web Format is a vector-based animation file format. Its design ensures efficient delivery over the web. The graphics of a small web format are easily scalable, fitting it into screen sizes. It is easy to compress and allows smooth compression. It supports a transparent background. Although SWF is a good file format, it has a major disadvantage: it needs to be supported by Macromedia flash, otherwise, the device will not support it.

JSON

JSON, which is the abbreviation of JavaScript Object Notation, is an animation file format that allows file storage and data interchange. It lets them use readable text to store and transmit animation data files. One of the many benefits of JSON files is that it is easy to describe. The use of hierarchical and syntax structure allows the application to interpret it themselves. It is simple and compact, allowing easy transmissions of animations files without lowering quality.

What is Lottie File Format?

Lottie is an animation file format designed by Gabriel Peal, Brandon Withrow, and Leland Richardson in partnership with the animator Abdul-Karim. It is based on JSON. Department of AIRBNB designed this library, and it is very easy to use. It traditionally uses the platform of Adobe After Effects animations as of now. Lottie animation solves many problems that animators face while using other traditional platforms.

How to animate Lottie Files?

Following are the major steps to animate Lottie animations:

  1. Develop the resources to import them into Adobe After Effects.
  2. Create the desired animation in Adobe After Effects.
  3. After creating animation, export the newly created JSON files through the platform of the Bodymovin plugin.
  4.  Create the project in XCode and connect it to Lottie.
  5.  Test your animation on a device and view it for any  further alterations

Why is Lottie files the best animation file format?

Following are the main reasons that make Lottie animation the best choice for animators:

Small File Size

Efficient animation file formats are the need of today. Today’s fast-paced world demands file formats that deliver the maximum in the least size, which means that it should provide good quality animations without occupying much space in the devices. Lottie animations provide a small file size while ensuring that animation quality is not compromised. The reason is that Lottie files are a vector-based file format, achieved using vector graphics and keyframing.

Resolution Independent Along with Stability

Another quality of Lottie animations is their ability to scale without compromising the resolutions of the animations. It means that even zooming and trying to fit animations to different screens doesn’t mess up the quality and resolutions of animations.

Multi-platform Reach

Multi-platform reach is a great benefit of Lottie files which makes it the best choice for animators all around the globe. Platforms like Android, Web, iOS, and React Native support it, enabling the user to use it without doing any modifications at any time and place.

Compatible

One of the best things about Lottie animations is that they are compatible with almost every web builder. You can use it to make animations for your website, and you can even use it for apps as well. They are perfect for making animations that work for websites builders, like WordPress, Wix, Storyblok, and Web-flow, etc.

Higher Quality

Lottie files have small sizes and are compact, but at the same time, they ensure that the quality of the animations remains intact, making it the best animation file format. It allows high-quality animations that you can store and transmit to different devices as small-sized files.

Allows Manipulations in Run Time

It allows the animators to apply modifications and transformations in animation at run time while using multiple platforms. It also allows the use of animation elements at the run time, helping animators to improve their animation easily and quickly. This allows interactivity, real-time transformations, and edits.

Open-Source Library

It has an open-source library which means that its resources are free to use, making it is a cost-effective solution for animators. The open-source library allows the animators to use the Lottie platform for enhancing their resources and tools.

In the above image, you can see that you can have the access to their open-library available to use from https://lottiefiles.com/

Lottie File – The best animation file format!

Animation is the art that requires the animators to choose the best-suited options and platforms for them that don’t compromise the quality of their animations and be easy to use. Lottie files in animation are the best option for animators and everyone else who wants to animate and is unsure which animation file format to use. It is not only easy to use and has a small size, but at the same time, it doesn’t compromise on quality and allows manipulating animations along with the run time.

Plus, if you don’t know how to utilize all these animation formats, look no further. Vidalgo brings you an all-new viewer to enjoy your animations. With the help of the viewer, you can export our files in  JSON (Lottie), MP4, Animated Gifs, and Alpha MOV (Transparent) formats, and use them anywhere you like!

See for yourself:

Click on the animation for more options

Find more information here.

Other Posts

blog
Best Lottie Players, Plugins and Tools
30/04/2022
Lottie has revolutionized the world of animation. To give a very basic definition, Lottie is a file format specific for animations, much like GIF. Due to Lottie animations, users can now display high-quality animations without any problems, such as pixelation, large file size, or slow webpage loading speeds. A single Lottie file is many times […]
blog
Infographics Trends and Animated Infographics in 2022
23/04/2022
With the rise of social media usage, visual content is becoming more and more popular than mere texts. From informational videos to sending memes to your friends and family, visual content is what people love nowadays. A popular type of visual content is infographics- packed with information, made to be attractive to the audience. Want […]
blog
7 Best Lottie Marketplaces To Help With Your Projects
16/04/2022
The Internet has brought the world closer, and sharing information has become extremely easy in this day and age. Today, there are numerous methods that let you share information, from videos to text and infographics to images. One such method is the use of animations which gives lets you provide information in a highly expressive […]

What is a Lottie Animation and How Do You Create One?

15/07/2021
blog

A lottie animation is composed completely of code. It is a digital description of all the forms, colors, and motions that make up an animation. You can use the lottie file format in websites, mobile apps, games, eBooks, basically almost any digital medium. You can even use them as stickers on messaging apps. That’s what makes the .json file so mighty for designers and programmers alike.

Mighty but small, like really really small. If a PNG is an elephant, a GIF is a bear; then a Lottie animation is a cute little puppy.

Nevertheless, this cute little puppy is super high-quality. It is probably one of the best formats for websites.

So, What can you do with a Lottie Animation?

Lottie animations or .json files are a great choice for making, sharing, and implementing interactive animations that engage and get people’s attention.

Animations are no longer a nuisance for designers and developers. The lousy .GIF formats, PNG sequences or mp4s are a thing of the past. You can forget the size and quality issues.

Lottie animations are live-savers for designers and developers alike. It actually allows for a more streamlined work process between designers and developers. You open a .json file, implement, edit with a lottie file editor, and you’re all set.

If you haven’t tried this animation format so far, you’re really missing out.

How to Make a Lottie Animation?

You can make lottie animations via a host of different platforms. Even beginners who don’t know much about motion design can still edit lottie files.

There are a lot of online lottie file editors that you can use, like Vidalgo. You can import your own .json file and do quick edits like colors, layers or get AI-powered design suggestions.

Step by Step Guide to Creating Lottie Animations in After Effects

You can create lottie animations in Adobe After Effects with the help of the Bodymovin plugin.

You can design the animation in Adobe Illustrator, import it into After Effects, and export it as a lottie. We will detail the whole process below.

Step 1 – Create the Design

You will need to design each posture, and frame. Let’s say that you want to animate a Mickey Mouse sitting on a piano, clapping his hands. Plan every pose and texture carefully.

If you want to use textures for animations, use vectors. The fewer parts there are, the easier it is to animate them. Try not to use any kinds of masks. It might result in bugs.

Step 2 – Animate it in After Effects

Before you start, you should know that there are a couple of After Effects features that you cannot use because Lotties do not support them. Here’s a list.

Don’t worry; you can use positions, rotations, scales, opacity, paths, gradients, PNG/JPEG elements.

Try not to use merge path, masks or other types of effects.  Make sure you loop the animation in After Effects before exporting it. Otherwise, it might not loop on your website/apps.

Step 3 – Export the Lottie Animation

As we were saying, you need to use the Bodymovin After Effects plugin. After you’ve installed it, open it and choose the animation you want to render.

Furthermore, in the Settings, you have a few options to check/uncheck:

  • Glyphs – if you have words in the animation
  • Hidden – if you have hidden layers that you want to export
  • Guides – if you need guided layers to be exported

Under the Assets drop-down menu, you will also find a few options that are important to exporting your .json file:

  • Original Asset Name – if you want the exported items to have the same original project names
  • Copy Original Assets – if you want to use the actual project source files (it does not include AI layers)
  • Enable Compression
  • Include in .json – to include all the rasterized images in the .json

For Export Mode, you can choose:

  • Standard – it exports the whole animation as a .json file
  • Split – to split the animation into multiple .json files every X seconds

You can also export it as HTML to preview it on the browser page.

Now, if you’re not a designer and just want to find some cool .json files to include on your website or mobile apps, you can always download them from various online Lottie libraries.

You can sign up on Vidalgo, our platform, and get notified when we launch our own library of lottie animations.

FAQ about Lottie Animations  

  • What do Airbnb and Lotties have in common?

So, Airbnb engineers created this open-source Lottie tool that helps to seamlessly add animations to any native app. It is basically an Android, iOS and React Native library that can render the AE animations in real-time. We owe it to them for coming up with the name “Lottie”. Check out the GitHub page!

  • Who invented the Lottie format?

Hernan Torrisi is the name of the guy who set up the Bodymovin plugin for Adobe After Effects. From there to to infinity and beyond, we have Lotties.

  • How does Bodymoving transform AE files into .json files?

Bodymovin uses the After Effects scripting and APIs to discover the frames and all the file assets and then transforms them into a .json. It basically follows the API structure provided by After Effects.

Introducing the new dotLottie format

Lottie animations are increasingly “famous” these days, and we can easily understand why:

  • Small file size
  • High-quality rendering by mixing vectors and rasters
  • Multi-platform support
  • Showing run-time changeable dynamic values for animation element properties

So what is next in the world of Lottie animations? Enter the dotLottie format!

The dotLottie has its own file extension, namely .lottie. So, no more confusion for programmers and designers.

It also has a manifest file containing metadata with preview images. However, probably its most important features are archiving and compression.

The dotLottie allows for animations and assets archiving, so multiple animations can be grouped together and save storage costs and bandwidth utilisation.

You can check out more about the dotLottie format in our upcoming blog.

The Bottom Line

So, lotties and now dotLotties will save us time and storage space, but more important than that, we will get the animations we want, how we want them, and where we want them, whether they’re on our websites, mobile apps or any other digital medium.

If you are a beginner, you can always use online lottie editors to import, edit, and export .json files however you want. Just don’t limit your creativity, that’s all.

Lottie animations will help keep your creative horizons open.

Other Posts

blog
Best Lottie Players, Plugins and Tools
30/04/2022
Lottie has revolutionized the world of animation. To give a very basic definition, Lottie is a file format specific for animations, much like GIF. Due to Lottie animations, users can now display high-quality animations without any problems, such as pixelation, large file size, or slow webpage loading speeds. A single Lottie file is many times […]
blog
Infographics Trends and Animated Infographics in 2022
23/04/2022
With the rise of social media usage, visual content is becoming more and more popular than mere texts. From informational videos to sending memes to your friends and family, visual content is what people love nowadays. A popular type of visual content is infographics- packed with information, made to be attractive to the audience. Want […]
blog
7 Best Lottie Marketplaces To Help With Your Projects
16/04/2022
The Internet has brought the world closer, and sharing information has become extremely easy in this day and age. Today, there are numerous methods that let you share information, from videos to text and infographics to images. One such method is the use of animations which gives lets you provide information in a highly expressive […]