{"id":6265,"date":"2020-09-24T14:59:15","date_gmt":"2020-09-24T12:59:15","guid":{"rendered":"http:\/\/blog.bart.sk\/en\/?p=6265"},"modified":"2024-01-29T10:36:00","modified_gmt":"2024-01-29T09:36:00","slug":"bodymovin-tos-svg-animations-web","status":"publish","type":"post","link":"https:\/\/blog.bart.sk\/en\/bodymovin-tos-svg-animations-web\/","title":{"rendered":"Bodymovin or how to’s of SVG animations on your web"},"content":{"rendered":"\n

In today’s article, we’ll introduce a plugin for Adobe After Effects, thanks to which we can relatively quickly and easily create engaging animations and take our website to the next level.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n
\n
\"\"<\/figure><\/div>\n\n\n

Source: bart.sk<\/span><\/p>\n\n\n\n

But first, let’s talk about the advantages and disadvantages of SVG animations.<\/strong><\/p>\n\n\n\n

+ Smaller file size (compared to GIF)<\/p>\n\n\n\n

+ Higher quality (no need to deal with the viewing on retina displays)<\/p>\n\n\n\n

+ An option to control the animation using JavaScript events<\/p>\n\n\n\n

– Cannot animate e.g. photos (lines and shapes only)<\/p>\n\n\n\n

This means that SVG animations are a great choice if we want to liven up our website and differentiate ourselves from the competition. However, we must understand that we can only create animations from \u2018icons\u2019 and \u2018pictograms\u2019.<\/p>\n\n\n\n

How to do it?<\/h3>\n\n\n\n

Preparation of materials for animation<\/h4>\n\n\n\n

At the beginning, it’s necessary to prepare the materials so that we can work with them later. We at bart.sk use programs from Adobe, so to prepare our materials, we also chose Adobe Illustrator, which is used to draw vector graphics.<\/p>\n\n\n

\n
\"\"<\/a><\/figure><\/div>\n\n\n

We’ll draw an icon to animate later and save it in an ‘.ai’ format.<\/p>\n\n\n\n

Installing the plugin for After Effects<\/h3>\n\n\n\n

In the next step, we’ll install the aforementioned Bodymovin plugin in After Effects. The great thing is that this plugin is completely free. You can download it e.g. here: https:\/\/exchange.adobe.com\/creativecloud.details.12557.bodymovin.html<\/a><\/p>\n\n\n\n

After installing, this panel will be added to your After Effects.<\/p>\n\n\n

\n
\"\"<\/a><\/figure><\/div>\n\n\n

Creating animation<\/h3>\n\n\n\n

Once we have the plugin installed and we also have our \u2018.ai\u2019 file ready to animate, we insert it into After Effects. In order to be able to work with it further, we will right-click on our file, e.g. illustration.ai -> Create -> Create Shapes from Vector Layer<\/p>\n\n\n

\n
\"\"<\/a><\/figure><\/div>\n\n\n

Now there is nothing stopping us and we can start with the animation itself.<\/p>\n\n\n\n

When the animation is ready, we just mark it in the Bodymovin plugin, click on “Render” and voil\u00e0! our ‘.json’ animation file, which we implement on the web, is ready.<\/p>\n\n\n\n

Implementation to the web<\/h3>\n\n\n\n

Subsequently, we just implement the library to our website, either using CDNJ or directly.<\/p>\n\n\n\n

<<\/span>script src<\/span>=\"\/<\/span>js\/bodymovin.js<\/span>\"<\/span> type<\/span>=\"<\/span>text\/javascript<\/span>\"><\/<\/span>script<\/span>><\/span>
<!-- OR --><\/span>
<<\/span>script src<\/span>=\"<\/span>https:\/\/cdnjs.com\/libraries\/bodymovin<\/span>\"<\/span> type<\/span>=\"<\/span>text\/javascript<\/span>\"><\/<\/span>script<\/span>><\/span><\/pre>\n\n\n\n
In the last step, we load our animation using JavaScript.<\/p>\n\n\n\n
var<\/span> animation <\/span>=<\/span> bodymovin<\/span>.<\/span>loadAnimation<\/span>({<\/span>
  container<\/span>:<\/span> document<\/span>.<\/span>getElementById<\/span>(<\/span>'lottie'<\/span>),<\/span> \/\/ Required<\/span>
  path<\/span>:<\/span> 'data.json'<\/span>,<\/span> \/\/ Required<\/span>
  renderer<\/span>:<\/span> 'svg\/canvas\/html'<\/span>,<\/span> \/\/ Required<\/span>
  loop<\/span>:<\/span> true<\/span>,<\/span> \/\/ Optional<\/span>
  autoplay<\/span>:<\/span> true<\/span>,<\/span> \/\/ Optional<\/span>
  name<\/span>:<\/span> \"Hello World\"<\/span>,<\/span> \/\/ Name for future reference. Optional.<\/span>
})<\/span><\/pre>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Source: bart.sk<\/span><\/p>\n\n\n\n
References
<\/strong>Documentation – https:\/\/airbnb.io\/lottie\/#\/web
<\/a>Plugin – https:\/\/exchange.adobe.com\/creativecloud.details.12557.bodymovin.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"In today’s article, we’ll introduce a plugin for Adobe After Effects, thanks to which we can relatively quickly…","protected":false},"author":21,"featured_media":5861,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":""},"categories":[199],"tags":[214,215,212],"_links":{"self":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/6265"}],"collection":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/comments?post=6265"}],"version-history":[{"count":12,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/6265\/revisions"}],"predecessor-version":[{"id":7381,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/6265\/revisions\/7381"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/media\/5861"}],"wp:attachment":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/media?parent=6265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/categories?post=6265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/tags?post=6265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}