Previously, engineers were often stuck bolting animations and transients onto static PSDs, or designers fighting to communicate what they wanted an animation to be like. This completely get rids of the problem!
I can't wait to try this out. Now I just need to learn After Effects...
Kinda scares me that After Effects (video manipulation tool) will be used for web animation.
Photoshop all over again?
.ps: I'm in the same boat of having to learn AE. Or at least improve on my basic knowledge of it.
I very much admire people who are adept with it, and sometimes when I watch the opening sequences in films, or certain types of adverts on television, I can even imagine how they might have achieved it with AE - but for me it was a great relief when I never had to use the damn thing again.
(I spent about a year maintaining a proprietary ActionScript library that would render AfterEffects animations - not dissimilar to Lottie, in fact, except almost certainly a whole lot worse, especially the bits I wrote given that there are probably some horses who understand AE better than I did.)
It was originally a post processing tool. Hence the name. After Effects.
Which is why this whole thing seems so similar to me.
It's a player for vector-based scriptable animations after all.
I recently moved from working on media (largely motion graphics) into a more technical field of study. Mt. Mograph helped flesh out my after effects knowledge to improve my motion graphics.
(No affiliation whatsoever, I just find his videos great, first one is a bit long while he gets his bearings)
Nowadays the compiler also generates native code.
How does Lottie deal with this? I know it calls to canvas directly when possible, but canvas.drawPath() is not exactly fast, either. What does the performance actually look like?
Masks and mattes are the feature that incur the largest performance hit because they require allocating a bitmap (8 bit for mattes and 32 bit for masks), rendering to them, then drawing them back to the canvas.
What is the actual end-to-end cost? Have you measured it at all?
If there is a matte, an 8 bit bitmap will be created and if there is a mask, a 32 bit bitmap will be created and drawn to.
An animation can only be at one stage at a time but you can easily create multiple animations. If you want to have several copies of the same animation, there is a composition caching option that will prevent you from having to deserialize and parse the composition again.
First of all, thank you for making this an open-source project.
I've noticed Airbnb has been very open with the design community about the internal processes and tools, whereas most companies keep their employees under NDAs. So my 2 questions are:
1. Did your team have to advocate for budget to create these tools, to write blog posts and to share them for free, or did Airbnb already had a plan to support this kind of research? How does this "make sense" for the typical budget-oriented PMs?
2. Did your team approach Adobe to see if they were already working on a tool like this? How does the initial planning go for these kind of projects?
Lottie looks super interesting, but the first questions that pop up in my mind are all about the planning and research behind such amazing (side?)projects and the people behind them.
There’s plenty of stuff we haven’t shown off yet, but I’d hope that almost everything will at least be written about, but ideally open sourced too.
My team is focused on building tooling every day. We think of our work in three buckets:
- Integrated Toolchain — next-gen design software built around our Design System (and componentized systems design as a whole), with a view to making our design & eng processes radically more efficient. Mostly proactive projects born from observing the cracks across the org. We just work on it; our experience is that external design software companies have little awareness of the challenges we actually face. Facebook's design tools team is a big inspiration here - they're doing really exciting things.
- Information Systems — there’s lots of knowledge spread out across the design org & Airbnb as a whole, and we like collaborating with other teams to solve their workflow needs. This is typically more difficult to release because it’s baked into internal systems. Airshots is an example of this, and we’ll be sharing another system soon.
- Experiments — as hybrid designer-engineers we tend to get pulled into different prototyping projects across the org, typically for new initiatives with exotic tech that we can’t talk about just yet.
Regarding ‘releasing’ & writing about these things — they’re important for us as a design brand, and we have the full backing (& encouragement) of our design leadership to share this stuff.
As previously noted, we have a pretty legit open source policy and it was one of the reasons I joined.
Again I want to stress that Lottie isn’t one of our projects, but I hope that helps!
I've been trying to create something like this but on a much smaller scale within my team, however, most of the time the challenge ends up being intimidating for designers, even experienced ones.
I'm sure the openness of Airbnb also helps to recruit top talent!
Good luck, and thanks for sharing, it's inspiring for the ones of us with the ambition of designing the future tools designers will use.
Some of this come from a mixture of architectures, and the fact we are using Swift+Objc, or just large asset files. Its something we are actively working on fixing.
One of the things we did to make it better was build Lottie!
Now we can replace PNG sequences and Gifs that can be several megabytes with simple JSON animation files which measure in the low kilobytes.
One such example is the diamond animation found on our listing pages. To include this in the project before Lottie we had to package a PNG sequence for each screen resolution(@1x @2x @3x) with alpha these sequences would add around 4-5 megabytes to our app for a single, small, animation. With Lottie we package a single JSON file which measures around 2 kilobytes!
Check the readme on the github for each repo for more info :)
"Facebook picked a small set of After Effects features to support, since they were focusing mainly on reactions, but we want to support as many as possible."
Does that mean expressions as well? wiggle, wiggle!
(Note that you can do this _already_ with bodymovin on the web if you want to)
Thank you for porting this to the web. Right now we use a combination of react-motion, GSAP, D3 interpolation and other dark magic. A strong contender in this space is most welcome, especially if it's at a higher abstraction level.
which was pretty simple to use.
I saw Lottie first, found bodymovin, and had an After Effects animation in our React app in about 15 minutes.
edit: I'm not affiliated with either project.
Note: I'm not taking anything away from either product, both are super amazing.
gah/ just my $0.02
Personally I think theres plenty of room for all three, Lottie, Squall and Keyframes.
We still use Squall here at Airbnb because Squall has some things to offer that Lottie doesn't. The After Effects preview app is really dope, and we'll never make one of those. We may not use it in our codebase, but to anyone wanting to seriously use Lottie I would recommend buying Squall so you can preview on your device so easy.
I'm very interested in building the proper hooks natively to allow for usage with `useNativeDriver: true`. We are perfectly situated for this too, considering the author of the iOS side was also the engineer who introduced offloaded animations to React Native on the iOS side!
(Source: I made the Lottie RN bindings, and work on RN at Airbnb)
Various flows in the Airbnb app are built with React Native. Our recently launched "Experiences" platform is built mostly with React Native, and there are many flows in the app that are built with React Native. Overall it's probably about 10-20% of the app right now. The decision to use or not use React Native for a new feature is a function of what the team building the feature is familiar with, and whether or not we think we can deliver a good user experience with the technology or not. The answers to those questions are quickly evolving though as we build up more infrastructure around React Native, and as the familiarity with the platform grows.
> What has been your experience?
Generally positive, but the difficulty of integrating React Native into an existing mobile app with large existing native code bases should not be understated. It's not plug and play. I'm giving a talk about this in detail at React Conf in March. Make sure to check it out!
> If you were starting a mobile company now, would you start with RN ?
Keep in mind that I was the main proponent of React Native being experimented with and adopted at Airbnb. As a result, I have some bias and other people at Airbnb might have different feelings / experiences.
Lottie uses json file that contains svgs and the animation, which can be compressed quite well, always display in the right resolution and whatever size you desire.
No user wants a repeat of 90's animated gif obsession or the 00's overly dramatic Flash craze. Hopefully we don't regress because of more recent advanced animation capabilities.
I love the idea of this tool.
This came just at the right time. I'm putting together a series of animations for patient education. In trying to make things cross-platform I had to resort to AE and non-interactive video. Lottie looks like it will enable me to string together something nicer, using native drawing functionality, and can incorporate more interactivity.