HomeNewsLottieFiles for Dummies

LottieFiles for Dummies

medium bookmark / Raindrop.io |


What is LottieFiles?

If you’re anything like me, and you don’t spend every waking hour of your day designing animations, you’re probably unfamiliar with the animator’s workflow and caught yourself wondering what LottieFiles is all about. Over the last several weeks, I have had several people ask me what it is, how it works, and what problem it solves.

So here’s my attempt at explaining what it actually does/is, once and for all!


Act 1, Scene 1

Enter: Designer

A lone designer rolls into the office feeling particularly motivated after spending all night dreaming up his micro animations featuring a toggle switch, exploding hearts, and a hipster peddling away on a fixed-gear bicycle.

He straightaway fires up Adobe After Effects — the visual effects and motion graphics application he uses to create striking animations. Here he feels at home, safe from the judgemental stares of the Marketing Director and the condescending approach of the Developers.

After a productive morning, he exports his animation as a MP4 file — and although these modern container formats allow streaming and storage, they are often too big (approx. 3MB a file) to be embedded on loop for web and mobile products.

Also these raw MP4 files are essentially frames that cannot be scaled and their enormous size makes playback a challenge. This means that the files need to be converted to fit the specifications of web and mobile (iOS and android) platforms.

More often than not, the designer (unless they are those rare triple threats types who can design, code, and function as a normal human being all at once) will need the help of a developer to overcome this hurdle, as it usually requires a heavy set of codes to be viewed on web or mobile platforms.

Our beloved designer then spends most of his afternoon sending specifications to the developer (who is usually crammed in a garage somewhere, with no physical or mental headspace to entertain your every query) in the hopes of bringing his work of art to life.

After several back-and-forths and many stifled curses, our designer finds that the quality of his original work has been compromised. He hears the developer says something about ‘bitrate levels’ and ‘cortisol levels’ and how it influences the quality of the file (one of the two has nothing to do with animations).

The designer decides to take matters in his own hands and uploads the entire MP4 file on the website. This takes up too much space and buffering time.

Nobody sees him as the genius animator he is.

He packs up his dreams of ever designing another micro animation, and goes back to designing flyers for the company’s next weekend event (ok maybe not!)

[This is one of the main reasons why, up until recently, animations were a thing of the silver screen — brought to life by the magic fairy dust at Disney and Pixar. Rendering simple micro animations just took too much time and effort. There has to be a better way to embed micro animations in our digital products]

Act 2, Scene 1

Enter: Bodymovin

And I don’t mean the groovy 90s song by the Beastie Boys.

Bodymovin is an After Effects extension that came into the design scene sometime last year as an answer to several thousand prayers beseeched by designers around the globe. It is a tool that allows animators to easily export their After Effects animation into a HTML5 canvas.

This is done by giving designers the ability to export their animations from After Effects as a JSON file, instead of an MP4.

What is a JSON file?

According to the grand masters of the Internet, JSON is a lightweight data-interchange format that is easy to read and write. I’m guessing they’re also considerably ‘lighter’ than the average MP4 (usually less than 200KB)

The bodymovin plug-in allows designers to view how their animation look and morph frame by frame (not to be confused with a player that makes the animation loop).

You’re thinking great! Gone are the days when designers keep bugging developers, right? Not quite!

The bodymovin plug-in is a tool that allows a basic key frame preview of your After Effects animation. In order to play the entire exported animation on your browser, you still need the bodymovin HTML player — which is supported with Javascript libraries.

This means that you still need the ninja magic tricks of a developer to help you build a line of code to play the animation.

I personally tried to install the bodymovin player, but after the first search link directed me into a never-ending thread on GitHub — I decided that some things in this universe were better left unexplored.

Act 2, Scene 2

Enter: Lottie

(Not to be confused with LottieFiles — we will get there soon)

You are now thinking — well too bad I can’t figure out how to preview my JSON file on the bodymovin player. The future of the Internet is on mobile anyway — and I have AirBnB on my side.

They’ve bestowed me with the divine gift that is Lottie. An iOS, Android, and React Native library that renders After Effects animations (i.e your JSON file exported using bodymovin). Lottie lets you add high quality animations as easily as static images, to any native app.

And if you’re asking, ‘what is a native app?’ How in the world are we even friends?

Just kidding! I only just recently found this out myself and was treated with this very disdainful statement when I displayed my ignorance. So I’m only paying the sass forward.

A native app is an application program that has been developed for use on a particular platform or device. Native apps mesh seamlessly with the respective operating system and software available making it more interactive with the platform.

The folks at AirBnB created Lottie to allow developers to build rich animations on various platforms without having to re-create several lines of code. Developers can now code exactly what the designers intended.

Yay! Sounds like designer-developer telepathy is finally here!

But wait a minute!

For the developer to code the exact design intended, the designer needs to make sure he sends the perfect finished JSON to the developer, ready to be deployed.

So although it makes life easier for the developer — it does not eliminate the back and forth between designers and developers. What if the animation doesn’t fit a certain specification? What if it breaks? What if a small element of the animation mysteriously disappears? What if the designer changes his mind?

So we’re back at square 1.

Designers still need the help of the developer to preview their animation. If only there was a way to preview and perfect it before sending it off to the land of hard coding.

Hmmm… what could this possibly lead to?

Act 3, Scene 1

Enter: LottieFiles

Tada! Introducing LottieFiles!

LottieFiles allows designers to share, test and iterate micro animations without the help of a fancy software or an intolerant developer. It addresses a problem that was for years taken as divine mandate — something designers had to endure as punishment for not knowing how to design and code at the same time.

Now when a designer has an animation, he can simply upload the JSON file (still created on After Effects and exported via bodymovin) on Lottiefiles.com and preview how it looks like and transmutes on web and mobile platforms (The Lottie Preview app lets designers scan a QR code once they’ve uploaded the animation on lottiefiles.com to view it on their phone screens). He doesn’t have to worry about the size of the file, or the chance of it shifting into something else entirely.

This allows him to know exactly what his work looks like and lets him make as many changes as he likes before shipping off the finalised version to the developer. The developer can then code the animation once and render it on various platforms thanks to Lottie (see above).

While designers and developers may often work from separate rooms or even countries, each needs the skills of the other to create a complete product. This missing step in the process of embedding micro animations in web and mobile platforms not only helps save time, but this also means there is less work and rework during the collaborative process.

With all this extra free time, the designer and developer can now salvage their friendship, and drive into the sunset and live happily ever after.

Act 3, Scene 2

Enter: The LottieFiles community

In the last 6 months, LottieFiles has become more than just a site for designers to test and preview their animation — it now also houses a sizable collection of JSON files from designers around the world.

I am amazed at how LottieFiles, which started as a weekend project to help make the designer’s life easier, has serendipitously grown into a community of animators. The site not only allows everyone to view the hundreds of files shared to date, it also enables users to download any or all of the animations shared by the community.

At the risk of sounding overly pretentious, I think LottieFiles is empowering designers to share their creations, that will not only make their way into some of the most dynamic digital products out there, but also inspire thousands of other designers, artists, product managers, and entrepreneurs.

Before LottieFiles, if the micro animations created for a certain project did not get the green light, they’ll be stashed in a multi-layer folder never seeing the light of day ever again. But now these animations could be discovered by other designers and developers making sure creative work is not wasted ever again.

With LottieFiles, we are hoping to make beautiful animations accessible to all. We are now on a mission to build a network of animators to ultimately build better and prettier web and mobile products that improve user interface significantly.

Simple micro animations are known to trigger positive emotions in users, and make products simpler and lives easier. LottieFiles hopes to fuel more cohesive web and app projects with greater aesthetics, cleaner interface and more functional code.


Check out the LottieFiles community today! We just hit our 100,000 downloads a couple of days ago, and to commemorate the occasion we’d like to thank Gabriel, Brandon and Salih — the force behind AirBnB’s Lottie for igniting LottieFiles, Hernan Torrisi for building Bodymovin, and to all the designers who have tested and shared your animations with us! Lets keep building the community and keep creating beautiful animations!

For all my other entires, please visit www.sonampelden.com

Featured articles on Prototypr: