It wasn’t long ago that the only way to include relatively fluid animations on your website was by uploading an animated gif. But the future is here, thanks to the Lottie web and animation format. Lottie’s vector-based animations consume minimal resources while offering enhanced interactivity, resulting in a more immersive user experience. By prioritizing both aesthetics and performance, Lottie animations have become the clear frontrunner in the realm of web animation.
The LottieFiles plugin for After Effects allows users to export their animations in said Lottie format. It provides an easy and efficient way to create web-ready animations and integrate them into web and mobile applications.
Here’s how to get started on the path to vector-based web animations using the LottieFiles plugin in After Effects:
Step 1: Install the LottieFiles plugin
To use the LottieFiles plugin in After Effects, you need to download and install the plugin from the LottieFiles website. The plugin is a ZXP file, which requires the ZXP Installer app (it’s a good idea to have this installed anyway, as a majority of modern After Effects plugins are ZXP files). Once you have installed the plugin, it will be automatically integrated into After Effects.
Step 2: Create your animation in After Effects
Once you have installed the LottieFiles plugin, you can create your animation in After Effects. You can check out our other posts for tips and tricks on how to maximize the tools in After Effects to create your animation. However, it’s important to keep in mind that certain features, such as track mattes in version 23 of After Effects and some expressions, may not be compatible with the Lottie format.
Step 3: Export your animation in the Lottie format
Once you have created your animation, you can export it in the Lottie format using the LottieFiles plugin. To export your animation, navigate to the Window menu, hover over Extensions, then select LottieFiles.
In the LottieFiles dialog box, you’ll be required to log into your LottieFiles.com account, then you can customize the export settings for your animation. It’s important to consider the effects you’re using. For example, if you use Rubberhose, selecting the “Guide Layers” checkbox is essential. To help optimize file size, we also recommend deselecting the “Include assets in json” option.
Once you’re ready to export, click the “Save” button, then go back and select the arrow button. You’ll have the option to upload your animation to your LottieFiles workspace or download a local copy.
Step 4: Embed your animation in your web project
After uploading your animation to LottieFiles, you can embed it into your web project. LottieFiles provides a simple and straightforward way to embed animations using a script tag that references your animation’s URL.
To embed your animation, copy the script tag provided by LottieFiles and paste it into your web page’s HTML code. You can customize the animation’s size, position, and other attributes using CSS.
The combination of LottieFiles and After Effects offers a powerful solution for creating web-ready animations that are both beautiful and efficient. With dedication, experimentation, and a touch of creativity, you can elevate your animations to new heights and enhance your online presence. Try exploring the capabilities of these tools, and see how they can help you take your web animations to the next level.
Happy animating!
