Install and use the Bodymovin extension to export After Effects compositions as JSON files.
BodyMovin / LottieFiles - requires that you have your After Effects animation in a JSON format and stored on your server. Because GitHub Pages is a static site with no backend, does this mean that. 1 day ago Luke Solomon's Downtown Chart. Pre-orders at Juno. This vinyl is available for pre-order at Juno, for shipping on the release date. Hikvision camera plugin for mac.
Bodymovin is a free extension that lets you export After Effects compositions as JSON files to embed in websites and add to apps. Let’s take a look at how to install the Bodymovin extension.
We’ll do this in 4 steps:
Bodymovin After Effects
1. Install the Bodymovin extension
Head to Adobe Exchange and install the free Bodymovin extension.
Note: If you have multiple creative cloud subscriptions, make sure you’re logged into the right one before you add the extension so you can easily find it in the next step.
2. Verify After Effects preferences
Open After Effects and look for Bodymovin, listed under Window > Extensions.
If Bodymovin isn’t there, try quitting and restarting After Effects.
To make sure your file permissions are set up properly, click After Effects > Preferences > Scripting & Expressions (Edit > Preferences > Scripting & Expressions on Windows).
Look for Allow Script to Write Files and Access Network and make sure it’s checked.
3. Render an animation
Now we’ll export a composition using Bodymovin.
Open your animation in After Effects and to export it choose Window > Extensions > Bodymovin. Select your animation and any other compositions you want to render.
Note: If you have any rasterized images in your composition, make sure you Enable compression in the Settings menu.
Check the destination folder and while you’re there, name the JSON file you’re about to export, hit Save, and click Render.
Once that renders, you should now have a JSON file in the destination folder. And now we’ll place the animation on the site.
4. Place the animation in a site
We’ll use Webflow for this step, but the concept is the same hand coding or using another platform.
From the Assets panel on the left, drag the animation into your layout.
That’s it! When you publish, export, or preview, your animation should play automatically.
Bodymovin After Effects Install
If you haven’t already, check out our full After Effects & Lottie in Webflow course.
See Airbnb’s Lottie site for a list of their currently supported After Effects features.
Thanks for the feedback! This will help us improve our content.
Something went wrong while submitting the form. Ahnlab ddos. Please contact support@webflow.com
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback