Apps look pretty slick these days, especially when you first download them. In the "onboarding" process, developers look to wow you with smooth transitions and slick animations, like this;
A lot of these animations are pure code, especially when it comes to simple shapes and curved lines. But to make a "simple" oscillating circle, for example, a coder would need to write something like this:
There's a lot going on here for a simple shape, and it begs the question - can't you use a visual tool to make...visualizations? After fumbling around in the dark for a bit, I found LottieFiles. I was amazed to discover that the awesome animations were made in a tool that I was already pretty familiar with - AfterEffects.
From Lottie's website - "In 2015, Hernan Torrisi conceived of the idea of exporting the representation of an animation in Adobe After Effects and rendering the animation at runtime. He leveraged the scripting abilities of Adobe After Effects to enumerate an animation project and released a plugin for Adobe After Effects called Bodymovin that exported JSON format description of the animation."
What this means is that instead of exporting an animation to a certain format to a certain frame rate, the Bodymovin plugin exports the animation as pure code, somewhat similar to what you see above. And after some clever engineering by a few folks at Airbnb, that code can now be easily inserted into apps and websites.
It may seem that exporting something like an animated gif can do the job just as well, but that's not in fact the case. Animated gifs are large files which take more time to load and results in a degraded image. But there's a lot more that Lotties can do.
After using AfterEffect + Bodymovin, a creator can upload their work to Lottie Files and choose if they'd like to give it away or charge for it. If another person would like to use the design, they can actually manipulate layer colors themselves in the Lottie Editor, before downloading and using the file!
And because the animation is pure code, it can react to events like scrolling or swiping. For example, look ath the crane animation on our TimeStamp Keyboard page. Notice that it animates forward as you scroll down, or backwards if you scroll back up. It's a small touch that goes a long way for perceived value.
So, if you're an AfterEffects head that might enjoy a few "snackable" projects, maybe try downloading the Bodymovin plugin and giving LottieFiles a try.
