Can You Import After Effects Into Animate

Animation on the web is here to stay. It's in everything from the subtle movements that assist bring our UI design (opens in new tab) to life, to fully blithe Sail experiences and WebGL experiments that are challenging what nosotros one time idea was possible in the browser.

While the inventiveness of devs and the capabilities of browsers are increasing, animation on the web has long been a poor relation to video – something that the movement graphics community has approached with caution for years. Recall that if yous've got a circuitous site to maintain, your spider web hosting service needs to be on indicate.

Developers have relied on libraries such as GreenSock and Snap.svg to do the heavy lifting in reproducing blitheness through JavaScript. While these tools have given a lot of flexibility, they can't compare to the precision and subtlety of blitheness that can exist accomplished using Afterwards Effects CC (opens in new tab)'s own timeline and easing graphs. From a web perspective, After Furnishings is very well suited to tweaking and trying out motion before committing it to code.

character with 'Ae' written on its belly — Bodymovin: the magical 'return for spider web' feature Adobe forgot [all images: Hungry Sandwich Gild]

Enter Bodymovin (opens in new tab), a groundbreaking extension for Adobe After Effects that exports blitheness direct from After Furnishings to JavaScript to be shown and manipulated in the browser. Created by Hernan Torrisi (opens in new tab), Bodymovin removes many of the barriers betwixt animator and programmer. At its base level, the plugin acts as the magical 'return for web' feature Adobe forgot. At its virtually advanced information technology opens upward new possibilities for interactive animation.

Bodymovin is a link in the concatenation of tools, plugins and systems ascent to meet some of these new possibilities. Airbnb's Lottie (opens in new tab) and Facebook's Keyframes (opens in new tab) both build on these foundations – and they are finally bringing the most powerful blitheness tool to the web.

Why use Bodymovin?

SVG has taken over the cyberspace and brought with it the expectation that everything should exist high quality, light and scalable. Bodymovin renders everything in your limerick to beautifully crisp SVG that keeps its vector quality at any size. No more compromising to lighten up that GIF or forcing your users to load swollen video files.

Likewise equally simplifying the procedure of exporting your animations, Bodymovin opens up mode more potential for developers to become creative with new interactive experiences. Bank check out CodePen for some of the fantastic ways the extension has been used – from interactive IK rigs to breathing-as-you-blazon interactive text.

To further simplify your web dev process, try a website builder.

Ae character and www. character — Everything is rendered to a web-friendly SVG that'south both well-baked and light

Exported animation can be manipulated in the browser like whatever other element, enabling united states of america to think of animation as an interactive and experimental tool within spider web design. And now because of Bodymovin, bringing your animations to the web has never been easier. In this tutorial you'll learn how to export an animation from After Effects and create a simple looping animation that responds to the user's click.

How to prepare your After Effects files

Support for Afterwards Effects features has improved greatly and y'all tin can expect to get pretty practiced results directly out of the box. That being said, your fancy flying 3D layers won't play prissy so be aware of the limits earlier you get started. Before you brainstorm a projection, e'er download the latest version of Bodymovin and bank check the GitHub page to come across which features are currently supported.

Don't be too hasty to motion onto the fun office… tidy files make a tidy listen. In this example they'll also assistance accept some of the actress work abroad from the browser and give you silky smoothen playback. Firstly, you'll want to make sure that your content is in After Effects shape layers for total vector power. To catechumen any Illustrator file to shape layers you can simply right-click and choose Create Shapes from Vector Layer. Whatsoever layers that aren't shapes at this phase will and so exist converted into images and they won't be rendered as vectors.

Adjacent, have a bank check through your layers and sublayers; there'south a good take a chance you lot tin simplify the contents of the shape without sacrificing anything. Effort to cut down the number of groups, paths and fills to but the blank essentials.

Take care with masks

Masks are an easy mode to skid upward at this phase. Be aware that alpha masks will work with the SVG renderer but won't show up should yous cull to switch to Canvass. Masks can be expensive in functioning so use them efficiently.

Rendering

Bodymovin works in two parts – an After Effects extension that converts animation data to a JSON file and a Bodymovin.js player to include in your webpage that can interpret this file and render it in the browser.

Remember your files are good to go? Open up up the Bodymovin extension through Window > Extensions and and so Bodymovin.

Once y'all striking refresh, you'll see a list of all the compositions in this After Effects projection. Select your chosen comp and then pick a destination binder inside of your web project. When you're happy just click render and watch the magic happen. When it's washed y'all'll get a 'finished' message. Congratulations! You've just exported a JSON file with all the data that the player needs to recreate the animation.

two characters — Bank check your layers – it could be an unsupported feature or an expression used in After Effects

To test your newly exported animation, click on Preview > Current Renders and remember to scrub through the timeline as you might spot something that looks a little unlike to what you'd expect. If yous do spot any problems bound back and check your layers – information technology could be an unsupported feature or an expression used in After Effects.

Some After Effects plugins such as Rubberhose now support Bodymovin. Rubberhose makes use of guide layers and subconscious layers. To actuate these, simply click on the settings cog adjacent to your chosen composition and tick the features y'all need.

If everything looks skilful, at that place'south just one more than matter you demand to do before you lot exit After Effects behind. At this stage you should have a fresh data.json file describing your blitheness, but no Bodymovin actor to interpret it. In the extension, click the 'Get the player' push in the height correct and save information technology with your JSON file.

Load the animation

Now you have everything y'all demand, let'south leap directly into the lawmaking and lay down the basics to get your animation showing on the page.

First brand a new container #anim_container to hold your blitheness. You also need to include the bodymovin.js file before the endmost torso tag. Adjacent tell Bodymovin everything about your animation and load it into the new container.

Let's walk through the setup stride by pace:

               var container = document.getElementById('anim_container');       // Gear up our animation         var animData = {           container: container,           renderer: 'svg',           autoplay: true,           loop: true,           path : 'data.json'       };       var anim = bodymovin.loadAnimation(animData);

You need to ascertain all of the parameters for the animation. Tell Bodymovin the container you want the animation to load into and then tell it to return the blitheness equally SVG elements. Next, tell the animation to play as soon every bit information technology's loaded and that you want it to loop back to the first when it's finished.

The path property tells the Bodymovin player where to detect the JSON data file for the animation. Due to the cantankerous-origin resource sharing policy (CORS), the technique you'll be using for accessing the JSON file will only work if y'all are on a server or local server. To work locally, you can make that data.json into a JavaScript file that assigns the object to a variable. In that case your setup might look like this:

            <script src="js/data.js"></script>   <script>    var container = document.getElementById('anim_container');     // Set up our blitheness      var animData = {         container: container,         renderer: 'svg',         autoplay: true,         loop: true,         animationData : information     };     var anim = bodymovin.loadAnimation(animData);   </script>

Refresh the page and your animation should exist playing inside the container. Select with your dev tools and you'll see that each element in the blitheness is now contained in <k> tags, and is being transformed in real-fourth dimension.

Looks amazing, right? Yous should now have a cute, well-baked animation showing in the browser (without a wretched video tag in sight…). The animation will e'er calibration to fit its container, and so get ahead and blow it up!

Bodymovin has a range of powerful methods for decision-making the animation subsequently it has loaded. Calling a method like anim.break() or anim.setDirection() will enable yous to dispense playback in unlike ways. Let's look at some examples:

anim.setDirection(-1) will play the animation in reverse
anim.pause() and anim.play() will start and stop the animation
anim.setSpeed(0.5) will play the animation at half speed

Add together interaction

In this next footstep you lot'll explore a few of the different ways to add together interaction to your animations through JavaScript. In this instance we export an After Effects animation with two sections: section A and section B. Section A uses frames from one to xx (triangle is holding its pogo stick) section B uses frames from twenty to forty (triangle is jumping up and down on a pogo stick).

Now, you want to play section a on a loop then (simply after the user clicks) play and loop section B. You can make utilise of the playSegments property to split up animations upward in this way. This method will take two arguments – an assortment with start and end values and a second Boolean – isFrame. Setting this to truthful will tell the animation to read the start and terminate values as frames, whereas imitation volition tell it to read these values every bit time.

              anim.pause();       anim.playSegments([0,20], true);

Calculation this tells Bodymovin to pause at the get-go frame and play only the blitheness from 0 to twenty frames. As you gear up your animation with a loop: true property this volition go on to play Department A once more and once more.

Permit's set up upwardly the whole case. You lot'll be using two segments of an blitheness for this example, so yous'll create 2 functions:

          var container = certificate.getElementById('anim_container'); // Fix up our animation var animData = {     container: container,     renderer: 'svg',     autoplay: simulated,     loop: true,     path: 'data.json' }; var anim = bodymovin.loadAnimation(animData); // When the animation is loaded run our firstLoop part  anim.addEventListener('DOMLoaded',firstLoop); // Create our playback functions function firstLoop() {      anim.playSegments([0,xx], true); }; function secondLoop() {      anim.playSegments([xx,40], true); }; // Heed for a click event container.addEventListener('click', function(event) {      anim.addEventListener( 'loopComplete', secondLoop); });

Manner to go! Now your animation volition keep looping until the user clicks on it, then it will start the 2nd loop. The only problem now is that a jump like this is very abrupt and it can ruin the smoothness of the animation.

An ideal situation is to include a third section to the animation, one that transitions from property the pogo stick to jumping on it. Now your structure will expect something similar this:

firstLoop – frame 0 to 20
transition – frame 20 to thirty
secondLoop – frame thirty to 50

We want your animation to stay in the first loop until it'due south clicked. At that point you will want to wait for the finish of the loop you are currently in and move onto the transition. After the transition is washed move to your 2d loop. This sounds complicated but stay with me! Here's your code in total:

          var container = document.getElementById('anim_container'); // Gear up upwardly our blitheness var animData = {  container: container,  renderer: 'svg',  autoplay: false,  loop: true,  path: 'data.json' }; var anim = bodymovin.loadAnimation(animData); // When the animation is loaded run our firstLoop function  anim.addEventListener('DOMLoaded',firstLoop); // Create our playback functions function firstLoop() {   anim.playSegments([0,20], true); }; part transition() {    anim.playSegments([20,30], true);    anim.removeEventListener('loopComplete');    anim.addEventListener('loopComplete', secondLoop ); }; function secondLoop() {     anim.playSegments([30,100], true);     anim.removeEventListener('loopComplete'); }; // Listen for a click outcome container.addEventListener('click', part(event) {      anim.addEventListener( 'loopComplete', transition ); });

On click, you're using a loopComplete listener to wait until you reach the last frame of the loop, and then run your transition() role. Here you remove the concluding listener, play the next set up of frames and then do the aforementioned again. After the transition is finished information technology will call secondLoop().

That's it!

Yous've worked with a few of the features of Bodymovin today, but if you lot're interested in learning more virtually the plugin, you tin can notice a load of data on the Bodymovin GitHub (opens in new tab) page. For more examples, check out the ever-impressive Bodymovin CodePen collection.

Hopefully this tutorial will have given you an thought of the unlike kinds of ways that you tin combine the use of After Furnishings and Bodymovin to produce some supercool animation for the spider web!

finished animation with triangles on pogo sticks — A separate section for each part of the animation

You can at present fix blitheness to be exported for the web, bring your exported files into the browser and brand your animation responsive to click. Think across the MP4 files that y'all were previously utilising and look to Bodymovin for creating much richer web experiences in the hereafter.

Being able to involve animators closely in the development process is becoming more than and more important, and the field of web animation is moving incredibly fast. With an ever-growing collection of new extensions, plugins and frameworks, animators and developers can expect this process to get easier and better over fourth dimension. I for ane can't look to see what the time to come holds.

Got a lot of files to support? Bank check out our cloud storage picks.

This article originally appeared in net magazine (opens in new tab) in 2017. Subscribe hither (opens in new tab) .

Read more: