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.
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.
“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.
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, and the IDPF hosts a collection of sample projects for reference.
Add the Lottie library to your project
Download the Lottie javascript library from 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
<head>
...
<script type="text/javascript" src="script/lottie.min.js"></script>
</head>
Add animations
Now you need some animations to add into your project. You can check out our collection of quality animations at LottieFiles to find awesome animations created by the community. You can also check out our LottieFiles Marketplace for premium animations, or even hire an animator 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.
<div id="canvas" style="height: 12em;">
<img src="cover.jpg" style="height: 12em;"></img>
</div>
And finally the javascript to initiate the animation.
<script type="text/javascript">
// clear out the placeholder
var elem = document.getElementById("canvas");
elem.innerHTML = "";
// load the animation
lottie.loadAnimation({
container: elem,
renderer: 'svg',
loop: true,
autoplay: true,
path: 'lottie/newton.json',
});
</script>
There are more configuration options you can play around with in Lottie, that is covered in the official Lottie Documentation.
Declare your assets in the manifest
The EPUB specifications requires all the assets that you just added be declared in the package.opf manifest.
<manifest>
...
<item id="c1" media-type="application/xhtml+xml" href="c1.xhtml" properties="scripted"/>
<item id="cover" media-type="image/jpeg" href="cover.jpg"/>
<item id="js" href="script/lottie.min.js" media-type="text/javascript"/>
<item id="anim" media-type="application/json" href="lottie/newton.json" />
</manifest>
Pay particular attention to properties=”scripted” declared for the html file which hosts the animation.
Pack it up, and ship it
You can now use your favourite eBook software or any other tool to package the project into your final eBook. We prefer using the official EPUB Check tool as it also runs helpful validations.
Adding Interactivity
As highlighted above, where Lottie animations work, it also opens up your eBook for exciting interactive features.
We recommend having a look at our LottieFiles Interactivity library. You can follow the guide for implementing scrolling based effects for Lotties.
What about animated SVGs?
SVGs (Scalable Vector Graphics), the web standard for vector graphics, has animation capabilities and can also work in a similar way, although the EPUB specifications specifically mention that animation elements in SVGs are not part of the current standard, and as a consequence validation tools are likely to complain.
However, they do sometimes work (as with Lottie, with limitations) and we have included one in our sample.
Download Sample
You can check out our sample EPUB included in our GitHub repository, or download it directly here.
Limitations
Rendering Lottie depends heavily on the use of Javascript, and this functionality is limited to readers that support the full use of the HTML Canvas and Javascript. Per our testing, Apple Books on iPhones, iPads and Macs provide the best support.
If you test it out with other readers, please let us know if it worked for you and we’ll update the results.
