What is the dotLottie format, and Why Is It Cool?

15/07/2021
blog

Yeah, we all know, Lottie animations are cool. You know what’s way more cooler? dotLotties. Ever heard of the dotLottie format?

Lottie already provides a host of nice features:

  • Streamlines the designer- programmer internal collaboration
  • Shorter loading times
  • Quick and easy animation edits
  • Open-free library
  • Cross-platform
  • Controlled by code

All these are impressive features, but dotLotties bring it to the next level. First of all, they’re now .lottie, no more confusing .json files.

Secondly, the dotLottie format allows you to bundle several animations together, like in an archive that takes less storage space without compromising on quality. So, basically, the dotLottie format archives and compresses Lotties in a more manageable formatting.

 Why is the dotLottie format so exciting?

If you’re a designer or programmer, you’ll love dotLotties because they enable you to add metadata and other related files within the archive. What is more, many animation components are stored in separate folders, so you can reuse the fonts or raster images. With lotties, they’re all embedded in the same big file.

What is even more impressive is that you can also add audio or preview images to dotLottie. How cool is that?

If you’re a programmer or designer and you’re not excited already, well, then you’re not a programmer or designer.

What Future Capabilities are we Looking At?

At the fundamental level, dotLottie provides a standard for creating, distributing and playing lottie animations – yes, all three.

Artists can include the After Effects project in the same dotLottie archive for further development so that they can reuse certain fonts or assets.

You’ll be able to play with this format on Vidalgo in the near future. You might be able to combine lottie animations in different ways with our online lottie editor. It’s coming! We’re also working on extending it to include audio; yes, it is possible.

Lotties under the dotLottie format could maybe even support 3D, and that is a significant step forward. There is also video layers support under development.

Hungry for some more cool features? How about this?

  • Simplified expressions language
  • General scripting engine
  • Support for mouse, touch, keyboard, and even sensors (compass, acceleration) interactivity
  • Haptic support
  • Network access support
  • Did we also mention 3D support?

Overall, dotLottie is a considerable upgrade that extends the scope of Lottie animations. It can act as a container, where Lotties are “tracks” that you can combine in different ways, like a DJ making art at a digital music festival.

Is it art or technology? It is both; there’s no doubt about that.

So, how do you make a dotLottie?

You can create a dotLottie the same way you make Lotties – with the Bodymovin plugin for AfterEffects. Moreover, you can also put it together by hand, with Lottie files or use an automated script that combines the animations one after the other, in an embedded frame, or according to any other additional input you might have.

Therefore, a dotLottie ZIP archive’s structure looks like this:

.
├─ manifest.json
├─ animations
│  ├─ animation-1.json
│  └─ animation-2.json
├─ images
│  ├─ img_1.json
│  └─ img_2.json
├─ fonts
|- js
|- resources
└─ previews

We have:

  • The manifest.json – contains metadata about the animations (author, version, list of animations, revisions, playback configurations like playback speed, sequencing, colors)
  • Animations – the actual folder where the animations are stored
  • Images – A separate folder containing only the image assets that are in the animations
  • Fonts – A separate folder with all the font assets
  • Js – Javascript files for scripting and interactivity
  • Resources – for the miscellaneous assets that support the animations
  • Previews – this is a folder that contains all the preview images for the animations; they’re named with the same base name as the animation file

{
  // Name and version of the software that created the dotLottie
  "generator": "LottieFiles 1.0",

  // Target dotLottie version
  "version": 1.0,

  // Revision version number of the dotLottie
  "revision": 1,

  // Name of the author
  "author": "Alibeyya",

  // List of animations
  "animations": [
    {
      // Name of the Lottie animation file without .json
      "id": "test",

      // Desired playback speed
      "speed": 1.0,

      // Theme color
      "themeColor": "#ffcc00",

      // Whether to loop or not
      "loop": true
    },
   // More animation file listings, if any...
   ....
  ],
  // Custom data to be made available to the player and animations
  "custom": {}
}

More dotLottie resources:

Web Player Component – https://github.com/dotlottie/player-component

dotLottie player for Android – https://github.com/dotlottie/dotlottieloader-android

iOS dotLottie player – https://github.com/dotlottie/dotlottie-ios

iOS dotLottie Loader – https://github.com/dotlottie/dotlottieLoader-ios

dotLottie CS (allowing dotLottie functionality inside netstandard applications)- https://github.com/LottieFiles/dotlottie-cs

Conclusion

You gotta’ love dotLotties, they’re open-source brilliance and give us countless possibilities in the world of lottie animations. Stay creative and actual, folks!

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 […]