The future of animation relies on us being able to constantly innovate and always look for better, more effective solutions.

Here at LottieFiles, we aim to achieve just that. We were impressed with the capabilities of Lottie and wanted to take it a step further, plus address several issues that were raised by our users and our team. And thus began the formation of dotLottie.

dotLottie is an open-source file format that aggregates one or more Lottie files and their associated resources, such as images and fonts, into a single file. This enables an efficient and easy distribution of animations. dotLottie files are ZIP archives compressed with the Deflate compression method and carry the file extension of “.lottie”. Think of it as a superset of Lottie.

Why dotLottie?

Lottie already brings a number of advantages that add significant value for its use as an animation format. This includes the small file size, high-quality rendering that is resolution-independent by combining vector and raster assets, multi-platform support and exposing run-time changeable dynamic values for animation element properties.

We wanted to retain these features and create a path to establish and encapsulate even more capability to it. Hence, we created a superset of Lottie: dotLottie

This initial release was meant to solve the following major problems:

1. Establishing an identity

It is the tiniest of changes, but changing the file extension from .json to .lottie avoids confusion and brings a lot of ease for designers and developers dealing with Lottie animations regularly.

2. Archiving

Designers and developers face challenges in storing, distributing, and integrating a Lottie animation with its dependent assets. This is due to difficulties in storing them on file systems and integrating them into apps and websites. Archiving animations and their assets together solve this problem and allow multiple animations to be grouped together and share assets.

3. Compression

The use of archiving with compression allows all the assets required by an animation to be grouped together and the total file size to be dramatically reduced. This is especially effective as an alternative to inlining image assets as Data URIs. dotLottie reduces operational costs of distribution as well as bandwidth utilization.

How to create a dotLottie?

Now that we know what a dotLottie is, let’s look into a few ways on how we can create one.

1. Convert Lottie JSON to dotLottie on LottieFiles

The Lottie JSON to dotLottie convert is a tool available within our LottieFiles website. This tool allows you turn any of your Lottie JSON files to a dotLottie within seconds. Simply drag and drop or browse to find the animation and upload it. You will be able to view the original file size as well as the size comparison with the dotLottie file. The result is a smaller file size compared to a Lottie JSON. To make it even smaller, you have the option to download it as an optimized dotLottie to reduce the size even further.

2. Convert Lottie JSON to dotLottie on dotlottie.io

dotlottie.io is an online webpage that provides all the detailed information about the dotLottie format - including background, structure, dotLottie player details and so on.  Similar to the above option, this page also has its own free converter, which can help convert your Lottie JSON to dotLottie. Simply select your animation, convert, and download; it's that easy.

3. Download as a dotLottie on LottieFiles platform

To make things even simpler, we have provided the option to download your Lottie animation straight as a dotLottie on the LottieFiles platform.

Integrating your dotLottie on the web

To integrate your dotLottie add the package to the head of your page:

<head>
	<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.js">
	</script>
</head>

Next, copy the dotLottie player and paste it inside your HTML:

<dotlottie-player src="https://assets2.lottiefiles.com/dotlotties/dlf10_l12sw9oo.lottie" autoplay loop style="height: 100%, width: 100%"/>

The above code is also available on dotLottie GitHub player-component.

Integrating your dotLottie on mobile

dotLottie is supported on both iOS and Android with their respective players. You can load a dotLottie just as you would a regular .json Lottie file.

iOS

To integrate with your Xcode project, first you have to follow some of the steps available in GitHub lottie-ios.

Next, create a LottieAnimationView and load the dotLottie file from URL:

let animationView = LottieAnimationView()
DotLottieFile.loadedFrom(url: YOUR_DOTLOTTIE_URL) { result in
    switch result {
    case .success(let success):
animationView.loadAnimation(from: success)
    	animationView.loopMode = .loop
animationView.play()
    case .failure(let failure):
print(failure)
    }
}
// USE YOUR ANIMATION VIEW

Android

For Android, add the Lottie dependency to your app's build.gradle file:

groovy
dependencies {
    implementation 'com.airbnb.android:lottie:4.2.0'
}

Then place the .lottie file in the assets folder of your app. If the assets folder doesn't exist, create one under the app/src/main directory.

In your activity or fragment where you want to display the Lottie animation, add a LottieAnimationView to the layout:

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animation_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

In your activity or fragment's code, initialize the LottieAnimationView and load the animation file:

LottieAnimationView animationView = findViewById(R.id.animation_view);
animationView.setAnimation("file_name.lottie");
animationView.playAnimation();

Replace "file_name.lottie" with the name of your Lottie animation file. The file name should not include the .lottie extension.

That's it! The Lottie animation should now be displayed in your app. You can customize the animation's playback behavior and appearance by using LottieAnimationView's methods and attributes.

Documentation

Since the introduction of dotLottie we have also worked on documenting the Lottie formats with LottieDocs. This document is a human-readable guide providing a description of the format and how everything works within it, making animation more accessible for developers and designers alike.

For more information on the file format click here 👉 dotlottie.io