# Using Lottie Animations in eBooks
*By Naail Abdul Rahman · August 20, 2020*
How to add Lottie animations to eBooks as an exciting way to enrich a reader's experience.
---
We’re always looking for new and creative ways to use Lottie animations. One such avenue we have been experimenting with is using them in eBooks.
_An ePub with an embedded Lottie, as viewed in the Kobo Reader app._
eBooks are an exciting way to publish your digital content. Being digital also enables them to be much more than simple text and images - they can contain interactive elements, videos, audio and fun little animations - enabling you to provide your readers with a much richer experience.
There are many competing standards and formats for eBbooks, however, the most popular and de-facto reference standard for them is [EPUB](https://www.w3.org/publishing/epub3/).
> “EPUB® defines a distribution and interchange format for digital publications and documents. The EPUB format provides a means of representing, packaging and encoding structured and semantically enhanced Web content—including HTML, CSS, SVG and other resources—for distribution in a single-file container.”
For the purposes of this document, we will be exploring this format. Since authoring an eBook is similar to authoring a website, the process for adding a Lottie animation into it is very similar. Unfortunately, a lot of the tools in the market for authoring eBooks don’t typically have scripting support, so our approach for now is a little more hands on.
## **Adding a simple Lottie Animation to your EPUB**
A sample project following this guide is available on [GitHub](https://github.com/LottieFiles/labs-epub3).
The structure of an EPUB is basically a number of HTML files, their supporting CSS files and assets, and a package.opf file describing the make-up of the package and its content.
**Create your project**
Start off a new project or open up your existing project. There are plenty of guides on how to get started with creating an EPUB. TheBookeDesigner has a nice introductory [guide](https://www.thebookdesigner.com/2015/07/4-ways-to-create-an-epub-ebook/), and the IDPF hosts a collection of [sample projects](https://idpf.github.io/epub3-samples/) for reference.
**Add the Lottie library to your project**
Download the Lottie javascript library from [https://cdnjs.com/libraries/lottie-web](https://cdnjs.com/libraries/lottie-web) into a folder called “scripts” at the root of your EPUB project. You will need to declare it in your package.opf file as well (see below)
Once you have the library in your project, add a reference to it in the .html file where you want your animations to appear.
It should look something like this
```html
...
```
**Add animations**
Now you need some animations to add into your project. You can check out our collection of quality animations at [LottieFiles](https://lottiefiles.com/featured) to find awesome animations created by the community. You can also check out our [LottieFiles Marketplace](https://lottiefiles.com/marketplace) for premium animations, or even [hire an animator](https://lottiefiles.com/marketplace/animators) to bring your vision to life.
Once you have your animation, place the animation .json files in a new folder named “lottie” in the root of your project. Once that’s done, add a placeholder to host the animation. You can apply CSS stylings as you wish. The example below is set up so that the placeholder image is shown, in case the reader software doesn’t support this functionality and doesn’t fire the script.
```html
```
And finally the javascript to initiate the animation.
```html
```
There are more configuration options you can play around with in Lottie, that is covered in the official [Lottie Documentation](https://airbnb.io/lottie/#/web).
**Declare your assets in the manifest**
The EPUB specifications requires all the assets that you just added be declared in the package.opf manifest.
```xml
...
