Think your files are good to go? Open up the Bodymovin extension through Window > Extensions and then Bodymovin. Masks can be expensive in performance so use them efficiently.īodymovin 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. Be aware that alpha masks will work with the SVG renderer but won't show up should you choose to switch to Canvas. Masks are an easy way to slip up at this stage. Try to cut down the number of groups, paths and fills to just the bare essentials. ![]() Next, have a check through your layers and sublayers there's a good chance you can simplify the contents of the shape without sacrificing anything. Any layers that aren't shapes at this stage will then be converted into images and they won't be rendered as vectors. To convert any Illustrator file to shape layers you can simply right-click and choose Create Shapes from Vector Layer. Firstly, you'll want to make sure that your content is in After Effects shape layers for full vector power. In this case they'll also help take some of the extra work away from the browser and give you silky smooth playback. Before you begin a project, always download the latest version of Bodymovin and check the GitHub page to see which features are currently supported.ĭon't be too hasty to move onto the fun part… tidy files make a tidy mind. That being said, your fancy flying 3D layers won't play nice so be aware of the limits before you get started. Support for After Effects features has improved greatly and you can expect to get pretty good results straight out of the box. ![]() Everything is rendered to a web-friendly SVG that's both crisp and lightĮxported animation can be manipulated in the browser like any other element, enabling us to think of animation as an interactive and experimental tool within 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |