This website requires JavaScript. Please enable JavaScript in your browser settings.

Blog

Design Inspiration

Working with Lottie Animations

Tips and Tutorials

Interviews

Inside LottieFiles

LottieFiles for Adobe After Effects

LottieFiles

•

26 Dec 2019

•

5 min read

8 Things the LottieFiles plugin can do to make your animation workflow so much better.

Who wouldn’t want their workflow to be not only easier but also way more efficient? Well, this is what we at LottieFiles have strived to achieve by creating the LottieFiles plugin for Adobe’s After Effects. We were thinking of all those tortured souls chained to their computers, banging their heads against the keyboard and screaming at their screens in frustration as their After Effects animations just refused to turn out as they should after export.

As time is the ultimate commodity, the LottieFiles plugin is designed with the animation workflow in mind to make sure motion designers and animators around the world get some of that valuable time back for themselves. Now with this plugin, most things Lottie can be done straight from within After Effects. No more faffing around and opening multiple windows and involving multiple people, just one plugin, that’s it. One plugin to do all the work you need it to do.

1. Instant Preview

The number one need that consequently catalysed the birth of LottieFiles was the need to preview Lottie animations after export to make sure everything looked up to scratch.

With LottieFiles for After Effects, you can preview how your Lottie animation is going to look without even leaving After Effects. If you want to make any changes to your animation, simply go ahead and make them and click refresh; the plugin in will update how your animation looks and play it for you.

2. Instant Preview on Mobile

As a lot more apps start using animations to enhance their UI/UX, the need to incorporate features to support mobile implementation was incredibly obvious. So we got busy tinkering away and made sure that in just a single click, your Lottie animation could pop up and play on your mobile devices.

Need to preview your animation on iOS and also on Android, as well as phones and tablets? No problemo, the LottieFiles plugin has got you covered. Whether you need to just test on one mobile device or multiple, the plugin gives you the ability to push your animation to preview it on mobile via the LottieFiles app in a single step.

You can download the LottieFiles app here for iOS and here for Android.

3. Export Animation as a Lottie File

By exporting your animation as a Lottie, you’re going to make animation implementation a breeze. And if at this point you don’t know what a Lottie is, well then you’re in for a real treat!

A Lottie file is a JSON-based animation file format that uses a textual, descriptive representation of the animation elements and movement towards a smaller file size and platform-independence, resolution independence and variable frame-rate during animation playback. Open-source and free Lottie players exist for the web, iOS, Android, Windows, React Native and other platforms (Xamarin, NativeScript, Vue, Angular, QT, Skia, Framer X, Sketch).

4. Optimize your Animation as you go

The LottieFiles includes a render graph when you preview animations to help you gauge playback performance. It helps you visualize individual frame render times during the creation and testing phase so you can make informed adjustments before shipping and blowing up your company’s webpage and apps.

5. Play your Animation Against Different Background Colors

When it comes to design, it is all about the details. The shapes, sizes, gradients and colors are all the little details which at the end of the day, make up the overall look and feel of your animation. And with all that comes a critical question that designers must ask themselves, how will my animation look among the environment it has been designed for?

Red, yellow, pink, green, no matter what the color with the plugin you can see exactly how your Lottie animation is going to look against different backgrounds. It may seem like a minor detail to some but you don’t want to end up with an animation that can’t be seen clearly because it blends in too much with the webpage design.

6. Find all your Animations in one Place

While these days digital work can found scattered among multiple platforms, in multiple folders and on multiple devices, in some cases a sense of organisation can seem futile. Everyday life can be messy enough, so you shouldn’t have to have any hassle when it comes to looking for all your animations.

With the LottieFiles plugin we’ve made sure that any of your animations that you’ve tried and tested using either LottieFiles web or the plugin, are accessible to you right from within After Effects.

7. Browse Free LottieFiles Animations

Whether you’re looking for a simple loader or something more intricate to quickly adapt for a website or app, LottieFiles has a whole bunch of public free Lottie animations that you can edit and use.

And sticking with the theme of making life easier and even more convenient, the LottieFiles plugin lets you browse all these free animations on LottieFiles without having to leave After Effects.

8. Upload your animation to LottieFiles from the plugin

You can save yourself even more time and upload your animation creation directly from within After Effects using the plugin.

Once you have your animation finished and have rendered it in the LottieFiles for After Effects plugin, click "Upload" and then the button with the globe icon that appears right after. This will open up your animation in your browser and then you can click "Publish to public" to have your animation published on LottieFiles to show it off for all to see.