Bodymovin extension for After Effects — After Effects & Lottie in Webflow


Bodymovin is a free extension that lets us
export After Effects compositions as JSON files, so we can embed them in websites, add them to apps, or confuse unsuspecting email recipients. Honey, who’s JSON? We’re going to cover installing the Bodymovin extension, we’ll verify our After Effects preferences, we’ll render an animation,
then we’ll place it in an actual site. Let’s start with installation. If you’re into searching and navigating
through a bunch of different pages, that’s fine. We’re looking for Bodymovin on the Adobe Exchange. We’re also including a link in the description. Install the extension, if you have any problems, there are some troubleshooting tips on the top of Adobe’s page here. That’s part one. Let’s move into part two. Open up After Effects, and check to make sure Bodymovin is listed under Window Extensions. If you don’t see it there, you might want
to try quitting After Effects and starting it back up. Or, if you’re like us and have a bunch of
different creative cloud subscriptions, check to make sure you’re logged in to the right
one when you add the extension. But one of the most common issues people have
when using Bodymovin is regarding file permissions. Let’s check out After Effects, preferences,
on Windows this is Edit, Preferences, and we’ll look under Scripting & Expressions. Now, Adobe might change the location of this
setting, it used to be under General, but what we’re looking for is Allow Scripts
to Write Files and Access Network. We want to make sure that’s checked, and
now we can move on to other things. That’s part two. Part three, let’s export a composition using
Bodymovin. What we see here is a simple animation. To export it, or render this into a Lottie
compatible JSON file, we’re going to do exactly what we did before. Window, Extensions, Bodymovin. A couple things here. First, you want to select this, and any other
compositions that you want to render. And, you can check out the settings to go
into more detail. An important note here, if you have JPG content,
or PNG content, if you have any rasterized images in your composition, you’ll probably
want to use compression. And you can embed, you can include those files,
in the JSON itself. We’re not going to do that since this animation
has none of those things, but it’s definitely worth noting. Finally, check your destination folder. This is also where you can name the JSON file
that’s about to export. And, when everything is ready, press render. The file renders, and if everything went okay,
you should have a JSON file sitting in the destination folder. And that leads us to our last step, placing
it in an actual site. Now, we’ll use Webflow for this but the
concept is the same if you’re hand coding this or using another platform. And, we’ll drag the animation into our custom
layout. And that’s it. If we publish, or export our site, or if we
preview, it’s there. The animation plays automatically. That’s it. Now, we cover a bunch of other use cases,
which tie After Effects and Lottie animations to different interactions, based on click,
or scroll, or mouse move. All of that’s free, so check those out on
Webflow University if you haven’t already. Also, check out Airbnb’s Lottie site, their
documentation includes a list of currently supported After Effects features. This is helpful when you’re planning a new
composition. But, that’s an overview of the Bodymovin
extension for Adobe After Effects.

Add a Comment

Your email address will not be published. Required fields are marked *