About 10 years in the past net animation was in large hassle. Adobe Flash was dying however there was nonetheless no apparent alternative. We wanted a quick, easy-to-author, web-friendly format able to staging larger-scale animated demos, cartoons, and banners.
Fortunately, in 2014 AirBnB supplied us their answer – Lottie.JS.
What’s Lottie?
Lottie.js is an open-source, vector-based animation format created by AirBnB Expertise and Movement Designer, Salih Abdul-Karim. The Lottie engine was designed to render quick, crisp, low-bandwidth vector animations identically on Net, iOS, Android, Home windows and React Native.
Briefly, in the event you take pleasure in utilizing SVG in your imagery, Lottie is an effective way to animate these vector graphics. Should you’re trying to exchange GIFs, MPEG, or CSS animation with one thing lighter quicker, and extra scalable, Lottie might be your greatest reply.
As Bashir Ahmed’s stunning instance demonstrates, Lottie can produce character-rich, lithe, fluid motion from tiny recordsdata – this animation is generated from a 54kb file.
At their most elementary, Lottie animations like Bashir’s require simply two recordsdata.
- The Lottie animation participant (Lottie.js)
- The JSON animation directions file
Why would I select Lottie?
There are numerous methods to animate net vectors – from CSS animations to SVG’s SMIL to GreenSock, AnimeJS, and different JavaScript libraries.
Nonetheless, Lottie has a killer ‘one-two punch’ of:
- a rising ecosystem of high-quality visible animation instruments
- the power to export clean, quick, environment friendly, scriptable animations
For all its well-documented issues, Adobe Flash’s lengthy success was based mostly on combining an excellent authoring software with simple cross-platform deployment. I feel Lottie shares a few of Flash’s benefits.
How do I create a Lottie Animation?
As Lottie recordsdata are nothing greater than JSON textual content recordsdata, technically you might simply code your animation straight into any IDE. In actuality, you’ll need to choose a ‘Lottie-capable’ animation software. Listed here are my ideas on the handful that I’ve tried and examined.
Lottie Instruments Spherical-up
For my part there are two components to contemplate when deciding on a Lottie Animator:
- Is it an excellent animation software?
- Is it simple to deploy your Lottie code?
I’ll cowl these two areas individually for every software.
Okay, that is arguably a controversial take, given the Lottie format was constructed for After Results, however I don’t imagine AE is the most effective Lottie creation platform… for most individuals.
Firstly, it isn’t low cost. Should you’re already paying a Inventive Cloud subscription, the price gained’t be a difficulty. However in the event you’re NOT presently a CC subscriber, you can be biting off a brand new ongoing minimal cost of $US21/month.
Secondly, Lottie was conceived as a intelligent strategy to ‘hack’ After Results into making net graphics. Whereas After Results is an extremely highly effective software, it’s designed to provide every part from Hollywood particular results to film title sequences to 3D sport cut-scenes to big-budget TVCs. There’s a boatload of stuff you merely gained’t want or need.
In case you are already an ‘After Results guru’, by all means, leverage your hard-won abilities and make wonderful stuff. Likewise, in the event you’re a Home windows or Linux person, After Results should be your most viable possibility.
Nonetheless, in the event you’re presently a Mac-based AE novice, there’s an argument that utilizing After Results to make Lottie animations is like water-skiing from an plane service.
Certain, you are able to do it, however there are simpler methods.
As I write this (2022), Haiku Animator seems to be a tragic sufferer of being the right product on the unsuitable time.
Animation Instruments
Launched in 2018, Haiku was constructed from the bottom up as a perfect mix of design and code. The animation instruments had been wealthy and highly effective and the UI was quick and smart.
Export Choices
Nonetheless, for me it was Haiku’s export instruments that actually set it other than anything, providing ready-to-use code for React, React Native, iOS, Android, Vue, and Angular, in addition to conventional GIF and Video.
Sadly, improvement on Haiku started to peter out a while in 2020 because the staff pivoted to a different product. They formally open-sourced the Haiku codebase in late 2021. Apparently, it nonetheless works in the event you undergo the set up course of, however the prospects for future improvement and assist seem shaky.
In Abstract…
I solely point out Haiku right here within the slim hope that it has been revived by the point you learn this. It was a superb product (I paid for it) and is sorely missed.
Circulate – (the ‘Why not?’ choose)
Circulate is arguably the logical inheritor to Haiku’s legacy – a properly featured animator that delivers neat, production-ready Lottie code for a variety of widespread net and cellular platforms.
By the way, it weighs in at a tidy 88Mb put in on my MacBook, which is useful for anybody with house limitations (that’s me). In contrast to Haiku, there are presently no Home windows or Linux choices supplied.
Animation Instruments
Though Circulate pitches strongly at Sketch customers, it can work with virtually any SVG file you present. It was easy to import and sync my Figma recordsdata, and Circulate even did a really creditable job at ‘sensible auto-animating’ the tween states between two static SVG frames I gave it. It wasn’t a flawless import of what I had, nevertheless it was competent sufficient to be helpful.
Circulate doesn’t provide a lot in the way in which of built-in drawing/form/textual content instruments. Finally, this isn’t an enormous deal, since syncing between Circulate and Figma/Sketch works very properly, and this helps retains the Circulate animation UI sharp and uncluttered.
Code Export
Circulate presents wonderful Lottie export amenities, however you have to to pick out one of many two higher-end plans to entry it:
- Free: Most animation instruments
- Media: $99/yr – Add video export choices (MP4, PNGs, GIF, and so on)
- Code+: $199/yr – Most code export choices (Lottie for Net, Animated SVG, HTML, and so on)
- Professional: $299/yr – All video and code export choices
The ‘Code+’ tier enables you to export Lottie for Net, though, barely disappointingly, you’ll have to improve to the highest tier Professional person plan to get entry to Lottie for iOS and Android. Which will or might not matter be a dealbreaker for you.
In Abstract…
Circulate isn’t the most cost effective possibility – within the ballpark of After Results – nevertheless it’s not costly in the event you animate usually. It’s a sexy, slickly-designed software completely suited to creating and deploying Lottie animations at an inexpensive value.
Keyshape is a wonderful product with solely two issues.
- It’s solely out there on macOS.
- It has a really plain, unimpressive, nearly naive web site.
I admit I had low expectations after I downloaded Keyshape. The web site screams ‘animation toy for hobbyists’, reasonably than ‘severe professional animation software’. The modest pricing ($29) backs up that concept. It will possibly’t be good at that value, proper?
To my shock, Keyshape turned out to be a lot higher than I anticipated. It’s truly VERY good!
Animation instruments
The Keyshape App set up is a bit below 100Mb on my Mac. The left aspect software panel comprises a couple of dozen primary vector modifying instruments – traces, rectangles, circles, textual content and the like. Although I believe most of us would use Illustrator, Figma, or Sketch to create our vector paintings, it’s nonetheless helpful to have the ability to make easy edits in your animator.
Keyshape enables you to create base ‘symbols’ after which manipulate as many situations as you want.
The animation timeline runs alongside the underside panel. Auto-Keyframing creates new keyframes any time you rework your paintings within the canvas view. Clicking on a ‘tweened’ part provides you entry to completely different easing capabilities – together with customizable cubic-beziers.
The righthand panel provides you wonderful management over any canvas object you choose. As you would possibly anticipate, that features scale, skew, rotation, XY place and mixing modes, but additionally enables you to management SVG filters akin to blur, drop shadow, distinction and hue.
Export instruments
Keyshape presents a variety of export choices together with MPEG, GIF, SVG animation, CSS, sprite sheets, customized JS and even PNG picture sequences.
Needless to say Lottie is just not a default export possibility in Keyshape. You’ll want to put in the free Lottie plugin for Keyshape to entry this new superpower.
Is Keyshape lacking something?
Keyshape doesn’t provide any element export amenities for React, Node, Vue, or any of the opposite widespread dev platforms, so you might want to resolve that half your self.
It doesn’t try to ‘sensible auto-generate’ the tween states between imported SVG keyframes like Circulate does.
However usually there wasn’t anything obviously apparent I missed when utilizing Keyshape App.
In abstract…
I take pleasure in animation usually and Lottie specifically, however the reality is, it’s not the place I spend most of my work hours. I’d love to do extra, however months go by after I may not contact an animation mission. Do I actually need one other month-to-month subscription? In all probability not.
For me, Keyshape looks like an incredible cut price for the ability it delivers – even when it cover it properly.
Keyshape Particulars
Trying to place a single label on Lottiefiles.com is not any simple process as a result of they provide quite a bit. This consists of an lively Lottie group, a Lottie asset market, Lottie tutorials, and Lottie showcase, preview and internet hosting purposes. It’s truthful to say, they’ve gone all in on the way forward for Lottie.
LottieFiles additionally provide a handful of straightforward Lottie modifying utilities. These embrace:
- SVG to Lottie software: This lets you drag-and-drop preset animations onto your uploaded SVG.
- Lottie Editor: A easy editor that permits you to alter timings and sizes on an any pre-existing Lottie file.
- A Customizable Net Participant: Tweak any Lottie animation earlier than embedding it in your website.
Let’s be frank: It will be tough to create advanced work from scratch utilizing the LottieFiles instruments, however there are greater than sufficient helpful assets there to make it value your whereas.
Notable mentions I haven’t examined
- Cavalry: I’m not going to fake I’ve examined Cavalry – as a result of I haven’t – however the performance appears superb. There’s a free plan (I feel that’s new) so there’s no purpose to not strive it.
- Synfig: Synfig is an open-source second animator. It has a terrific characteristic set, however the UI feels a bit outdated and fusty subsequent to trendy apps like Circulate, and Cavalry. However in the event you’re on tight funds, it’s exhausting to beat free.
- Lottielab: Lottielab might be a browser-based software that appears to be styling itself as ‘the Figma of Lottie animator’. The UI appears good. They’ve talked about a $15-$25 month-to-month subscription value level. Sadly, I can’t evaluate Lottielab because it has remained in strictly restricted non-public beta for not less than 12 months. I personally joined the beta waitlist in early September 2021 (10 months in the past) and nonetheless solely have entry to the Lottielab Discord channel. We’ll see in some unspecified time in the future sooner or later.
TLDR
If creating light-weight vector animation takes up a number of your time, Circulate would be the most targeted and full Lottie improvement software out there. It has a crisp workflow and the export choices are pretty much as good or higher than most opponents.
Should you already know and like Adobe After Results, use what you realize.
In my case, I take pleasure in animation, however that’s not the place I expend most of my work hours. Months might move after I don’t contact an animation mission. Do I actually need one other month-to-month subscription? In all probability… not.
For me, Keyshape (at $29) looks like an incredible cut price for the ability it delivers – even when they obscure it properly.
