Creating an Animated SVG Icon with Bodymovin

skl.sh/designc... - First 500 people to sign up will get their first 2 months free!
Today's question: How much experience do you have with After Effects?
-- In today's tutorial, we're going to use Adobe After Effects with the Bodymovin plugin to create an animated SVG icon. We will use the .json that's exported from the plugin to use it on a web layout and control it with JavaScript.
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!

[@DesignCourse]

Hit that SUBSCRIBE button! Today's question: How much experience do you have with After Effects? -- My answer: I learned AE in the mid 2000's with Andrew Kramer's video copilot series. I'm not an expert, but I'm fairly decent with it. You?

[@HolySemtex]

Adobe software never felt right for me, now getting into the full Stock because of work, and after a while it clicks more and more. I like AFX, but I think it and Premiere should get merged together.

[@pedromartins9049]

To reverse the animation instead of a sudden stop and cut on the animation, here's what you do: 1. on the 'mouseenter' function: anim.setSpeed(1); anim.play(); 2. on the 'mouseleave' function: anim.setSpeed(-1); anim.play(); Whenever you enter or leave, the animation will be picked on the frame it was left on and just reverse it's path until the last frame of itself (be that the first or the last absolute frame). Thumbs up for others to see

[@Bangs_Theory]

It's BodyMovin _"Bodee-Mooven"_ urban vernacular for *Body Moving* (Dancing)

[@TheEmafrost]

Thanks 4 the vid mate! Cheers from Argentina. You made it more easy to understand.

[@HolySemtex]

Would you consider viewer design battles with vote polls in the video? Would be such a badass format and so fitting. Also a lot of interaction with you! Love ya :D

[@DesignCourse]

Elaborate more on your idea a bit. Thanks!

[@HolySemtex]

@@DesignCourse you could host a site where people upload their Screenshots of self-made designs. Everybody has a right to vote for as many designs as they want - the top 10 should be your main focus, because thats where things get interesting: you could make some kind of rules, concepts and basic ideas which people have to follow in their own way. Then they have a certain amount of time in which they can come up with whatever they want - at a set date every entry gets reviewed and via a in-video poll people can vote for their favourites. Maybe in categories like those from your "How to learn design as a programmer" - videos with added things like aesthetics. After all there would be a follow-up in which you announce the winner who gets a little price. Maybe a coursetro membership? Some nice SVG pack? A Skype session with you? Whatever. It would be awesome :D and also you can extend this to one design challenge and one code challenge!

[@sethm3194]

I agree

[@罗先生-g1b]

json动画文件需使用 AE 制作并导出（ JSON 格式），需要为AE安装 bodymovin 插件（管理员权限）。接下来在 AE 中使用点击 窗口--->扩展--> bodymovin 出现弹窗，点击 RENDER 即可生成我们需要的 JSON 文件。 中文文档：www.yuque.com/lottie/document/readme

[@sethm3194]

I use After Effects 2 to 3 days a week. I animate characters for our KZbin channel Talking to Mormons. I have used this plugin before. In some ways it simplifies thing but it is pretty cpu intensive, especially on mobile. Depending on the complexity of the animation.

[@牛明俊]

Thanks for tip. That do help me figured out how to add json-svg animation in my website. BTW, I can`t find the lottis.js in your descriptions. I got my data.json from other developer. So, this is almost the perfect tutorial lesson in my case. If anyone one come to watch this video, This is zero to hero tutorial lesson for sure. 感謝提供這麼有用的方法，這幫我設定好我要的SVG動畫，因為我的原始檔是從合作開發人員那邊拿到，如果說有附上lottis.js的下載檔就完美了。基本上如果是自製向量圖片轉json動畫，這影片是手把手教學

[@vatthanalong5279]

Thank you! I've always wondered how it works and how to make it!

[@IgalaMan2010]

Thanks Gary for your tutorials. Can bodymovin be used in an Angular project? Thanks

[@HolySemtex]

Ayyyy, never been this fast. Now is a good time for coffee.

[@RomboutVersluijs]

PS bodymovin by itself is already for HTML i believe. THe Lottie part lets you add it to mobile apps and such

[@Unknown_User768]

Gary you didn't explain how you launched page on local server and also why does it require it?

[@digitaloneup290]

Oh you have to install the "Live Server" extension in VS Code. It's not required... I think Gary just uses it as a quick way to render/preview the code in a browser. Also seems to use something like browsersync

[@robertoinnocenzi3626]

Thank you for this tutorial, I'm new in animation and I'm trying to understand where to start from. Please, can you tell me the name of the microphone you are using in this tutorial ? It sounds very good. Thank you in advance and Happy 2020 !!!

[@danialqsk8507]

Thank you so much it was very helpfully

[@dmytro_korolkov]

Is there a way to have animated SVG file from exported JSON file?

[@antonino161]

Even though I followed the steps, After Effects doesn't render the animation, why?

[@Doffu]

Do you have any videos explaining how to setup the gzipped player for production servers? I have a website that I've made locally with this but now I want to go live with it and am running into issues setting that up...

[@melomancheto2761]

Lovely vid, thanks!

[@dianaserradilla5204]

Hi ! can i use bodymovin in angular? can you make a video of that?

[@juliocgfreitas]

that's a great resource, fine fine thank you!

[@juliocgfreitas]

by the way. I learned AE with Andrew Kramer's in mid 2000's as well :D

[@rameshmadara1]

moderate experience. and Thanks!

[@adhdartist1994]

May you please allow me to add spanish subtitles to the video, some poeple are asking me to do a video about this in spanish but I do not have time so, why not simply adding the subtitles to yours? Please let me know when you allow this in the settings? Thanks

[@raghavm]

I have never used after effects and would like to learn :)

[@SolidousMdz]

How much heavier are these SVG animated vs pure CSS animated icons? Maybe harder to generate the CSS icon but both are code after all.

[@ammadanimations]

thanks

[@videocasetteTV]

Does it support element 3d and optical flares plug-ins, is it compatible with the scenes created by cinema 4d inside after effects

[@igordumencic1427]

Nice, thank you :)

[@damiendeloubes]

Can you still change the color of the paths using code?

[@lakshmideviselvaraj9219]

thanks a lot..

[@mikelvazquez5100]

They are not .SVG files, they are JSON files what you export

[@pedromartins9049]

It renders as SVG when you implement it on the website. You can also import, SVGs or SVG Sequence to AE and export as json (which contains the SVG data).

[@nahidjoy03]

Best

[@Andredy89]

It doesn't work in AE2020

[@rohithudupa7520]

I export to file json. And when I use that json file in android programming it does not run .The json file to www.lottiefiles.com/ to check the animation . In this also the animation is not showing . can you help me,please?

[@Asrekk99]

hello Im student in webdesign from belgium and I try to use bodymovin for my working end of study .. Sadly I can not do it .. when I try to open my html page I have this message : bodymovin.js:3 Access to XMLHttpRequest at 'file:///C:/Users/utilisateur/Desktop/teste%20bodymovin/data.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. If i try to check the demo whit the exportation I can see my animation.. I try to disable my firewall but that still does not work.. Can you help me please ?.. :(

[@Criztobal]

I'm trying to make it work but nothing happens...

[@alexandros-markovits]

Very interesting! Would this work for VueJs or is there a way to do it for it? If anybody knows i would love to know :)

[@Badafrart]

Can i ask you how can i export my puppet animation from after effect with bodymoving? i think isn't support the puppet functions

[@RomboutVersluijs]

CHeck the page at aescripts.com/bodymovin/ it shows all supported specs

[@yosvanivaldes2930]

please create an angular 7 carousel

[@christianmarucco5296]

for some reason, I'm not getting anything here .. Is anyone else having troubles with this ?

[@RomboutVersluijs]

My most of those nice animations are done with shapes and animating them.

[@RomboutVersluijs]

PS what was your animation again, something for zooming? I didnt quite understand the movement thought

[@mushnikov35]

where are the subtitles . ???)

[@grubgourmet7255]

13:15 to skip the tedious after effects stuff.

[@ragnarlothbrok6576]

First view first comment first like

[@cocledocle]

more codding then expected..