#After effects to html5 animation how to

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. If you don’t see it there, you might want to try quitting After Effects and starting it back up. Open up After Effects, and check to make sure Bodymovin is listed under Window Extensions. Install the extension, if you have any problems, there are some troubleshooting tips on the top of Adobe’s page here. We’re also including a link in the description. We’re looking for Bodymovin on the Adobe Exchange. If you’re into searching and navigating through a bunch of different pages, that’s fine. 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.

#After effects to html5 animation how to

We’re going to teach how to animate each of these triggers, because we’re going to show you how you can use both After Effects and Webflow to their full potential, together.īodymovin 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. These triggers we’re listing on the screen, you can use any of them to control the animation. If you preview it now, it animates exactly as it does in After Effects.

Step two: export it using an extension called body moving. Step one: Create an animation in After Effects. It’s built on Airbnb’s Lottie and it works like this. What if, without any code, we can bring After Effects to the web? What if we can do this visually, based not only on when someone loads up a web page, or clicks, but what about an animation that can progress as someone scrolls? Or, what if, using that same technology, we could render an image sequence in Cinema 4D, or Blender, and control that sequence based on the position of our mouse? This is what’s possible with After Effects in Webflow. Many consider it the industry standard for motion graphics.