So how did you find yourself starting on what was to later blossom into the Lottie we all know and love today?
I come from the Flash world, which was the reason I started working on Lottie. It started with the disappearance of Flash, when iOS, iPhones, and iPods decided that Flash was no longer going to be an option. At the time, I was working as an action script developer and working with Flash. So when I had to leave Flash behind, I really felt the void and really missed the cool things you could do with Flash. Flash was one of my main inspirations to try to see what else we had out there and After Effects was such a powerful tool that I wanted to combine them.
Flash was declining, and I really loved doing multimedia interactive things. That was what I had a lot of fun doing, working with Flash. My wife and I wanted to do an interactive storybook where you’d be able to select or build your own story with PCs, and I started researching what was available, what tools we could use. Since Flash was not an option, and I wasn't finding anything to replace it, I started looking into standard formats, like SVT, HTML, JavaScript - all these standard technologies. I needed an animation tool that could fill in the piece that didn’t exist. There were very basic animation tools at that time, but none of them were as powerful as Flash.
So that was really the starting point, wanting to build a tool, to build a book, an interactive game storybook, and it got the best of me. I started building this player and an exporter for After Effects. It was super interesting, and I was having a lot of fun creating the tool and the format. So I put the storybook on hold for some time (actually for some years), and I focused on building this engine. So this is mostly where it all started.
I did some research, which helped me a lot. I searched through Google. I went all the way to page 10 in Google results, looking for anything I could find, any small piece of information I could gather from anyone who might have tried this or that got stuck in the middle. I started doing a lot of research before I started and trying to understand how to make a useful and easy to implement tool because what I did know was that this was going to be used mostly by designers and not just developers. There had to be an easy way of creating the animation, exporting it, and adding it to a webpage really easy with as little code as possible. That was the inspiration behind the philosophy and what was driving some of my decisions. On the other side of things was the fact that I wanted to build it for myself, and I had a specific goal, which meant that I knew what I needed, so I started refining it, and since I had a real use case, that meant I could test it along the way.
For a couple of years, I had it public on GitHub, but this was just to learn, explore, and to see what I could do to challenge myself. Others started adding more and more features, more and more looking into performance, looking to engines to could work with this. It had some usage, but it didn't have as much attention as it did when the Airbnb team started looking into it. They contacted me and told me they were looking into this exporter and wanted to do the animation tools for native platforms. So when they launched, it was a huge moment. That's when things exploded - a lot of people started using it.
I had no expectations for it to turn out as big as it did. I always dreamt of giving a useful tool for the community because I wanted to contribute my part, but I didn’t expect this.
With a full-time job, how do you still manage to maintain things for Lottie?
Lottie is something that I do on my weekend, in my extra hours. When at work, not swamped with work from my nine to five job, I'm in the community or finding things out that can be improved, or discussing with other people who are building players, trying to learn what they need from the Bodymovin extension or from the Lottie player itself. It's a lot of fun, definitely satisfying. Unfortunately, my nine to five job takes some time, sometimes more than the usual nine to five hours, so I need to do whatever to balance what I can do for Lottie.
Fortunately, many things are getting solved by this great community. Sometimes even by LottieFiles themselves who provide things to help easily add to animations, like adding interactivity or scrolling, the kinds of things that people have been requesting a lot. As the tool is more stable and it doesn't have as many bugs as it originally had three years ago, I don't get as many requests or issues as before.
I'm always looking for Lottie animations. I search on Google or on Twitter for things people have created and have made it part of my day; it’s very satisfying.
I like to do some proof of concepts, especially with interactivity or something that I see as an extra challenge. My wife and I are now building that interactive book that we wanted to build when this all began. We started back on it, and now we are trying to have at least that first version, so we feel good with our conscience knowing that we finally did it.
What are the top 3 reasons that you think make Lottie so important?
The fact that Lottie reduces the amount of code to make a solution possible, I think it's one of the main pillars of why Lottie is so important. Even from the developer’s point of view right now, it's very simple to implement. So it's not only a simple solution for designers, but also for developers.
I think the other reason is definitely the file size and quality. The fact that it's rendering in vectors and it's not a rasterized format is something that scales well on any device, scales well on large devices and small devices with a single file. And that JSON file is usually much, much lighter than a video than or an MP4 or whatever you could deliver instead or achieve. So I think that's another significant selling point that people value, file size plus scalability.
The other reason that I don't think has been exploited as much, but I think it has a lot of potential, is interactivity, or being able to provide dynamic animations. You have your template, but you could change, for example, the text of the animation, or you could change the colors. Or you could customize certain things without needing to deliver to any additional different animations. Just with an extra piece of code, you can build these static animations and make them interactive or dynamic and customized for the user.
Right now After Effects is the tool for creating Lottie animations; what are your thoughts on that?
It would be amazing to have multiple tools for creating Lottie, and not just After Effects. I think different people are comfortable with different tools, and also the fact that After Effects is not an open-source tool or free tool means that it would be great to have an alternative for creators. You know, something free or at least something simpler that could also provide Lottie animations. On the other hand, After Effects is an industry-standard, and it is the go-to tool for companies or any kind of software/design studio, so it's important for them to feel comfortable using a tool that's a standard.
So on one side, I think, yeah, it would be great to decapsulate from After Effects. I think soon, the LottieFiles team will have a Flash/Animate plugin, which would be a step towards extending the ecosystem. But I also think it would be great to call out other types of tools to export to Lottie. But as I said, I think on the other side, being a standard is something that people feel comfortable with, knowing that this tool will live for a long time. And it's not something that is going to disappear in a couple of years because it's not maintained or whatever.
After Effects is such a big giant, and Lottie feels like a plant that’s just grown bigger than the pot than it was originally planted in, like it’s going to break right out of there and just keep on going. People are really familiar with After Effects, and sometimes they feel that the Lottie format is limited because it doesn't support everything that After Effects provides. So they need to understand that Lottie is a subset of After Effects that they can use; it’s like a tool inside that tool. It's like a plant that is growing inside a pot that's not meant for that kind of plant, but it adapts itself to the space that pot provides.
So it’s a little of both. I think After Effects is huge, and sometimes it's frustrating that it doesn't support everything. But on the other hand, Lottie has more than what After Effects can provide, considering responsiveness in different formats. The fixed canvas size on After Effects is definitely seen as a limitation for Lottie.
What barriers still remain for designers and developers? What problems are there left still to solve?
I think Lottie should be more flexible, especially for different types of formats. I think that's a big barrier where people feel that they need to find a workaround. Specifically talking about Lottie on the web, the player file size is pretty large, and it's a lot of JavaScript. It's like trying to have After Effects in 60 kilobytes of JavaScript. So it's small because it's a lot of After Effects in a small file, but having 60 kilobytes of JavaScript downloaded and also executed is something that’s sometimes is a concern for developers. So if there could be some kind of native formats that don't need the player, and for example, can work without the player itself, or that the player can rely on lower level APIs, then I think that would encourage a lot of people to feel more confident using it, because it would just be a browser issue to run, play, animate and not a JavaScript engine.
What do you think is the future for Lottie?
I think something that's going to be great is the Skottie version of Lottie. Skottie is a player that the Skia team built, which is based on lower-level technologies like Skia and WASM. And I think that should be the future, a way of taking advantage of lower-level APIs, WebGL, WASM, and things that can run and perform even better than JavaScript, and also provide a bigger universe of supported features. If we could render on webGL, we could have much faster effects than After Effects provides or any kind of tools like Blur, displacement maps, like warp meshes or Puppet pin tool, things like that, that needs this extra jump, this extra leap into much better technologies. I think along with Lottie, that's where the animation community, the browser, the web, and the native application’s community should put their focus on next.
And also, there's the Rive team there. They are building an animation tool that is sort of an alternative to Lottie, and what they are building a very, very powerful tool, and right now, I'm trying to see if there's a way to combine both our efforts, and it’s only now am I starting to understand what is possible.
The Lottie movement surprises me every time. So I find it's hard to predict where it's going (in a good way). What I would like to see is some sort of standardization to the Lottie and attention to a format that can work in multiple contexts that anyone can build a tool around. It's either a tool to play the animation or a tool to create animations, but build something that's more of a standard and can be approved by the community by the standard people groups.
Maybe right now, I don’t think Lottie has the amount of brand penetration that Flash had as it's not installed on every computer, but the fact that companies like Google and Twitter are using Lottie (like how Twitter are using Lottie animations for their latest animated like) means that Lottie is actually getting a lot of reach. Even those with any sort of Google app installed, they're bombarded with Lottie animations.
Do you think it's possible to misuse Lottie?
Sometimes, people use Lottie when they shouldn't, like they'll want to animate one square, have it rotate, and Lottie really isn't what they should be using to animate it. Using Lottie for something like that has its cost-benefit; it just doesn't add up because you can do that with CSS or GreenSock or another animation tool that is more suited to that kind of animation scenario. So I do see a danger in misusing Lottie and providing a bad experience for users.
That's the danger in not understanding the tool’s limitations as sometimes it's not suited for certain uses.
If you could address a million folks using Lottie, who use it every day, what would you want to say to them?
I hope you are having fun. I hope you're enjoying it. Tell me everything that you find painful with Lottie so that we can fix it and make it even better for you. What inspires me the most is seeing the animations that a lot of you make. There are some animators whose work I've seen that's just out of this world. Truly incredible, they do amazing animations, and on top of that, it's so great to see that under the hood, they're using the Lottie player. That's something I really, really, really love. And seeing people say they use Lottie at work or that it's made a huge difference in their day-to-day of working with animation is also very inspiring because I really think we were missing a tool like this for some years after the demise of Flash.
What do you and the original Lottie team find yourself discussing most about Lottie?
We are more interested in listening to what the community wants, adding the features, and prioritizing the features that the community wants. I find that's what we discuss the most, and trying to understanding what other trade-offs are or supporting new things that might have a performance hit, and how to address those kinds of things.
Those are our main subjects that drive our conversations; it’s part of the same conversation on figuring out how we can provide a solution for those kinds of requests. Solutions such as adding expressions or placement maps or meshes, things that would add a lot of richness to somebody's ability to animate with Lottie.
What role do you think LottieFiles has played in the Lottie revolution?
I think the greatest thing about LottieFiles is the community aspect; they built a community around Lottie. Before, Lottie was something you'd find mostly in the developer’s world. You'd find it on GitHub, or you will find it on Airbnb's engineering page. If you were a developer, you would have to be the one to introduce Lottie to the designer. I think LottieFiles managed to bridge that gap, in a way, they’ve created a place where the design community could find things easily and also understand better how to use Lottie much more easily rather than reading about it in engineering documentation.
Any words of wisdom or words of advice for the LottieFiles team?
For the LottieFiles team, I know there's a lot of expectation for the Animate extension. I know they are probably struggling because it's very difficult, and I see a lot of expectation from the GitHub page as people ask about it all the time. I have also had some conversations with these people, ones from animation studios, some that are pretty, pretty large. They work with Google and have Animate users who would love this extension as I know it would change their lives if they could use something else apart from After Effects. Having the possibility of Animate for Lottie is probably going to make a very, very, very big splash in the community.
What's a feature on LottieFiles that you'd like to see?
I think the Lottie Files team could provide some kind of alert system that notifies them when people upload an animation that is 50 megabytes in size. Perhaps a warning that could let you know that you need to improve your animation along with a kind of sequence of recommendations.
The Lottie player itself is something I have on my list, as it could also definitely be much cleverer in the way it loads images or the way it produces assets; the experience can be improved.