How Engineering Magic Made Delight for Kids Easily Achievable Within YouTube Kids
The best tools are the ones that get out of the way and help you build the best possible experiences for your users; Lottie and Bodymovin have easily delivered that.
Back in February of 2017 I was working on an app intro animation for an unreleased YouTube product now known as YouTube TV. On YouTube Kids we had been working for years with fun splash screen animations to bring delight to our users when entering the app and my colleagues on YouTube TV were looking to implement something similar for their product launch.
Let’s pause here to talk about UI Motion Design for one hot moment. Creating animations for UI can often be the easiest part of the journey; sitting in After Effects and coming up with cool ways that the UI can move, shift, transition or build is exciting and fun, until it’s time to implement. The problem in implementation is multi-faceted. First, animation libraries, methods and programming are not the focus of the majority of engineers I have worked with. It’s a specialized branch of programming that takes a lot of passion, commitment and experimentation. Secondly, animation is EXPENSIVE to the performance and install size of an app if not built correctly. Loading a mobile app with MP4s, PNG Sequences or even, dare I say, GIFs for delight and polish can be highly detrimental to device performance and app install size. In some global markets install size and performance of an app can be the difference between a growing or dwindling user base. Lastly, trying to grok a sense of physics, timings, easing curves and choreography from a quicktime file is not easily achievable by most engineers, heck, most motion designers would have a hard time doing it in a timely manner. Trying to piece together all the little subtle details that make an ordinary animation into something magical is very hard to pick apart and can be extremely time consuming.
Back to the original story at hand. I had created a splash animation for app launch and got approval from the UX team on YouTube TV, so it was time for implementation. I knew the animation was too complicated to pull off in code so I ran some tests on whether it would be better to export as a MP4, PNG Sequence or GIF. After I broke down some different exports, the results looked something like this:
MP4: 1124x2000, 60fps, 3 seconds = 1.6MB
MP4: 1124x2000, 30fps, 3 seconds = 1.5MB
PNG Sequence, 30fps, 3 seconds, compressed = 2.1MB
GIF, 30fps, 3 seconds, limited color palette = 1.3MB
Clearly GIFs were going to be our best option for file size, but the playback was really choppy even though the file was 30fps. MP4 was our best option for playback if we wanted smooth animation, but the file size was getting uncomfortably large. The PNG sequence was incredibly large, even with running the files through a compressor and general performance on scaling PNGs in code was pretty poor, especially on Android at the time. This is early 2017, I understand some of this has changed, but no elegant solution using one of these three routes has really come to fruition.
When it was time to deliver a final asset, the engineering team on YouTube TV had some concerns with file size. I explained to them the process I went through to get to the size I had and they were at least satisfied that I had done my research and tried to deliver the best possible balance between file size and quality. Some time had passed when I received an email from one of the engineers for YouTube TV informing me of something called Lottie and that I should give it a try on the splash animation I had created. Now, a personal note here, I am pretty sure I rolled my eyes like some attitude fueled teenager when I read the email. I had been down this road before and most every 3rd party system I had tried (and quite a few were being developed at the time) always seem to put more work on either my shoulders or the engineers’ shoulders generally amounting to a total rebuild of the animation. The UI Motion Design unicorn at the time was an easily understandable tool that would bridge the huge gap between After Effects and code for iOS and Android and even though there were some brilliant minds working to build that bridge, everything felt like scaffolding attached to the end of the cliff.
So, to do my part, I downloaded the libraries and the plugins and threw some of my past YouTube Kids work at it starting with some playful loaders I had created years before. I honestly wasn’t expecting much, but when I exported my first file I am pretty sure my jaw hit the desk. I was looking at my animation, in vector form, running 60fps and it was 80% correct on first export. My first thought was “What kind of wizardry is this?!” So I spent the next week toying around with old animations figuring out the incompatibilities with the way I had built things and all my past animations were quickly exporting assets nearly identical to what I had created in After Effects and there was no noticeable playback differences between iOS and Android. This was a BIG DEAL! Once I tweaked a bit of the YouTube TV splash animation, the output data now looked like this:
MP4: 1124x2000, 60fps, 3 seconds = 1.6MB
MP4: 1124x2000, 30fps, 3 seconds = 1.5MB
PNG Sequence, 30fps, 3 seconds, compressed = 2.1MB
GIF, 30fps, 3 seconds, limited color palette = 1.3MB
Lottie: 1124x2000, 60fps, 3 seconds = 22KB
Yeah, you read that right…22KB. That’s less than 2% of the original export size for the same animation!
What is Lottie?
Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations, created using shape layers, exported as JSON data files with Bodymovin and renders them natively on mobile. It is a library that allows a motion designer to create smooth, scalable animations that retain consistency across multiple development environments without the need to spend countless hours/days/weeks endlessly tweaking animations with engineers.
What is Bodymovin?
Bodymovin is an After Effects plugin that can be downloaded for free via GitHub. It translates animations based around shape layers in After Effects and exports them to SVG, Canvas, HTML + JS or, when combined with Lottie libraries, iOS and Android. All of this is done through the use of the JSON file format.
This Discovery Changed the Future of YouTube Kids
Freshly filled with excitement about this new discovery, my mind started racing as to how we could use Lottie to rebuild portions of the YouTube Kids app. We had been relying on GIFs for years since launch because of the complexity of the animations and the fact that they were limited color vector illustrations. We also needed flexibility in transparency so that some of our assets could be used on multiple colored backgrounds. GIFs only allow binary transparency. Either a pixel is fully transparent or fully opaque. You can use matting to fake a basic transparency, but that’s it. MP4s have alpha channels which work pretty poorly in the mobile space and add a lot of data size. PNG Sequences have the most complex transparency but are extremely expensive on file size for the final output.
My first goal for shipping with Lottie was to tackle the category icons. As of that time the icons in YouTube Kids were exported using PNG sequences because of the opacity complexities. Also, because of the large variety of devices we had to develop for, there were 3 sizes of each icon. The category icons alone were taking up 10MB of app size! A week later I had working JSONs for every one of our category icons and the impact on app size went from 10MB to 300KB.
I moved to loader animations next to see if those more complicated animations could hold up as well as the category icons did.
Finally, our engineering team ran an experiment within the app to see how Lottie would perform on iOS and Android within the YouTube codebase. There was a lot of hesitation and concern about how older devices would handle the new libraries and file format. Since we were building for kids, our users often ended up with older hand-me-down devices. It was vital that those older devices could handle the new tools we were using, especially since we were modifying one of the most important parts of the app, navigation. The tests were very successful and very few bugs arose in the testing phase. With a green light from UX and Product, it was time to start making a larger investment in Lottie.
Rebranding YouTube Kids and Moving Towards a More Traditional Animation Style
As Lottie was beginning to look like a really viable toolset for future development and delight, there was a rebrand on the horizon. I had great success implementing Lottie for navigation and loading so I was looking for what next steps could be taken for increasing delight in the app. As the vision for the YouTube Kids rebrand began to take shape there was a strong creative push to build out a cartoon world with characters who had personality and roles. With such a creative decision came the desire to tackle animation in a more classical approach using a more organic illustration and line style to give the world a more natural feel versus the very geometric illustration styling that was part of the YouTube brand. From a Motion Design perspective this was going to be as terrifying as it was exciting. Moving to this style of illustration was going to be really fun and rewarding for our user base, but creating delightful moments in the app was going to be costly because the amount of data that would be needed to create lifelike and playful animations with a traditional style would be rather large. This would become the next challenge in pushing Lottie to see what could be accomplished. Category icons and loaders had already been successful in the original app, so I started by recreating animated versions of the more complicated category icons.
From there, I took a first shot at seeing what Lottie could do with some simple character animation by creating a loop-able loader based on the rebrand launch character “Bottleflip.”
Much to my surprise and enjoyment, Lottie and Bodymovin were holding up to everything I was throwing at them and I was starting to feel like this workflow could easily become the future of animation in the mobile space. So, I did what every curious creative would do in the same situation and I pushed harder. I wanted to see if I could break something.
The splash screen animations were likely too complicated for Lottie with their complex scenes and I figured there was no way those experiences could be built with vector JSONs without major performance issues, so I decided the space to push experimenting further was onboarding. Onboarding would be a great place to test delightful animations without impacting the core watching experience of the app in case of unforeseen side effects or performance issues. This would be the space to take the character animation a bit further to see if things would start breaking or slowing down. And thus ‘Cat and Keybox’ was born.
When comparing this animation to any modern cartoon the initial response is more than likely, “So what? Nothing fancy or new about that.”, which appears mostly true until you realize that these animations are run entirely from a collection of vector data compiled into a JSON that was exported directly out of After Effects, resizable for any screen size with no impact on quality, running at 60fps and nearly identical on iOS, Android and Web with a footprint only a fraction of the size of any bitmapped versions mentioned above. Just a few years ago, animations of this complexity were impossible in code.
So Where to Next?
I kept pushing. Some of the file sizes were starting to get up there with ‘Cat and Keybox’ being one of the biggest offenders at about 800k because of how many points within the After Effects shape layers were being manipulated, but performance was still pushing near 60fps on the most complicated animations on older devices.
I had the opportunity to build a promo animation featuring our lovable ‘Shy Panda’ character, so I took the opportunity to try a few things. First, I was experimenting with how difficult the workflow would be to create animations that were in the vein of traditional styles, but with the difficulties of playback being 60fps. Traditional animations can, in some ways, be easier to create because of the frame limitations. Using smears, motions strokes and fewer frames means more forgiveness in the end result. So Shy Panda got his debut with an animation to educate users about profiles:
On top of utilizing these fun and complicated animations I had the thought about how this workflow could help us save space for our illustrations as well. Android has SVGs and AVDs, iOS has PDFs, but there isn’t a single format that can be used to display vector assets across all platforms. The experiment I wanted to try was whether I could use Lottie to display vector assets, even if they weren’t animated. Thus we shipped this illustration as part of the promotion:
Time to Go Big or Go Home!
Now that Lottie had become an integral part of YouTube Kids, we had an opportunity arise to tackle a more immersive experience. It had been a dream of the UX team to rebuild the Voice Search experience for our users feeling that our younger audience would really benefit from a more intuitive way to find their favorite content. The project was ambitious from the beginning and our story that everything was based around was that YouTube was an ocean of content and we wanted to keep our users safe in the shallow waters near the reef. Our initial input idea was waves that procedurally responded to a kid’s voice to help illustrate what was happening and when their mics were in use or when they were not. Our visual approach looked something like this:
We introduced our new searching buddy, Hunter, to help our users find what they were looking for. Our approach was to use him in different states of animation letting the kids know what was going on. Our first state was idle:
Through a combination of transformation keyframing, point animations and animation loops, I was able to create a playful moment where Hunter is waiting for kids to engage with the search system all the while being combined with a moving sky displayed with Lottie, procedural waves that respond to kids’ voices and complex coral illustrations displayed through Lottie while still maintaining strong performance on older devices.
On top of all the delightful moments I was able to build, I was able to achieve something I had been working on since I began using Lottie and understanding it’s power, I was able to create a fullscreen animation that would be used as an error screen without crippling older devices through performance overload. I was able to create a fairly elaborate vector animation with multiple moving parts and still keep the file size around 1MB.
Being able to pull off all of these layers of animation on top of everything else we were building in this section of the app could never have happened if we hadn’t invested so much time into Lottie over the years. Understanding where the boundaries were, how best to build all the parts, a brilliant engineering team knowing how to implement and tweak pieces to keep performance in a reasonable place, all attributed to a rich and delightful experience for our users.
What’s Next for YouTube Kids and Lottie?
With the excitement of what we were able to accomplish with Voice Search behind us, the next phase is to figure out how we can push and test other aspects of Lottie to improve our app load times, app install size and asset flexibility. With vector assets we are looking at moving the entire app from a fixed pixel layout utilizing bitmap resources to a vector based UI built around a percentage layout that bends and flexes to whatever device size it’s being displayed on giving a near identical UI experience for all aspect ratios. We will also be exploring replacing all illustrated assets inside the app with JSONs so that we only need a single file for all devices across Android, iOS and Web. Lastly, we have thoughts about replacing UI icons with JSONs so that we can do color changes in code to compensate for the desire of a light mode/dark mode experience. Beyond that, we have our eyes on View Controller transitions and what may be possible in using Lottie to help transition between different views.
Thank You!
If you are still with me at this point, I am impressed. Thank you for taking the time out of your busy life to read through all this! If there are questions I can answer about our experience using this toolset, please feel free to reach out to me here or through LinkedIn. I have also created an article about how to get started with Lottie here and an article about some optimization tips for Lottie here. Thanks again for reading! Happy animating!
TL;DR: How Did Lottie Help YouTube Kids Achieve a Higher Level of Delight for Our Users?
- Fully scalable vector animations with smooth, clean edges which allowed complex animations for loaders, icons and a multitude of delight base animation that would have been impossible to recreate in code.
- Consistent animation reproduction across multiple development environments including Android, iOS and Web.
- Animation frame rates that are limited only by a device, 60fps for the majority of the mobile landscape.
- Complex transparency settings along with the ability to use blending modes allowing flexibility in placement of assets created.
- Unlimited color options for optimal design capabilities.
- Very small file size.
- A single text file is delivered to engineers for implementation and initial exports of most AE projects using shape layers is 70–90% accuracy preventing the need of back-and-forth between Motion UX and Engineering for parameter tweaking and troubleshooting saving large amounts of process cycles.
- Very efficient workflow between UX and Front End Developers. It doesn’t put extra work on the motion graphics artist and it doesn’t shift extra work to engineers.
