Wow.. You can Export Adobe After Effects Animations as SVG! Here's how.

Today's Question: How much experience do you have with After Effects?
-- In today's tutorial, I'm going to show you how to use airbnb.io/lottie/ to turn your AE animations into SVG that can be used on web and mobile. Enjoy!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS weekly!
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]

Make sure to smash the subscribe button! My answer to today's question: I've used After Effects on and off throughout the last 15'ish years for various purposes. I'm definitely not an expert, but not a beginner. I'm going to definitely start improving my skills as it pertains to animations for UI's and such.

[@geoffmahugu8983]

Have never used After Effects but really looking forward to the Tuts.

[@morales-motion]

SAMSHAS THOSE BATTON

[@DesignCourse]

TY FRO SUBS!

[@RindraParama]

but when i smash the subscribe button, it's popup a warning message to unsubscribe :(

[@hloniramakatane7584]

are you still taking questions?

[@mrbuckets5445]

If you've installed the addon, skip to 13:40 for the Export Process. Thanks for the video!

[@jemjem8902]

This is actually my first time using after effects and illustrator. I've been into web development industry for some time now but I haven't really touch the animation side (other than css animations). Today I decided I'll learn this stuff as I want to be stronger in this particular area of web development.

[@AhmedThahir2002]

Is there a way to export an after effects animation as just pure svg?

[@TimiKokol]

nice tutorial... btw you could just use top:50%; left:50%; and then transform:translate(-50%,-50%); and you would have it perfectly centered no matter what you put in for the width :) just a quick tip

[@rubenscheer]

Where can we save this as an actual .svg file??

[@sebastianfischer4332]

Wow.. You can Export Adobe Effects Animations as some shitty code and there's absolutely NO SVG file appearing in the video!

[@yeknommonkey]

@@MercuryRisingFast yeah same, I ended up using www.svgator.com to generate a few quick animations from my illustrator file. looking to see whether I'm missing something that my adobe subscription already covers for such a basic task but seems not! anyone please tell me different if there is?

[@BrentLagerman]

great tutorial, wish this was supported natively in the browser though, loading 200+k player plus another 100k for an animation is kind of a lot... Is there a gui for svg that exports just svg elements that are animated (for less complicated anims)

[@PolygonMotions]

Change those keyframes to "Ease Keyframes" for smooth animation.

[@GixrGuy]

I'm an AE intermediate. Thank you for this Lottie tutorial. I would like to see more instructional videos like this one featuring AE animations adapted for web and mobile.

[@afrosheep1]

Hey! I don’t have the “Open with Live Server” option when I right click “index.html”. What do I need to do differently? Thank you so much for your tutorial it’s extremely helpful! 🙏🤩👍

[@Morgiver]

Why don't let users export in svg file ?

[@andresuaza]

If you find the answer, PLEASE let me know

[@marcopfeiffer8277]

@@andresuaza Well svg does not really support animations to that degree. Lottie is modifying the svg during the animation.

[@user-bs3jd2hj3z]

I did not notice at what second you get the svg file?

[@marciobttb]

You don't, title was missleading

[@ZammisHolc]

Right ... no SVG file?

[@ajayghangas1090]

The title is to export the animation as svg. not svg file. SVG stands for Scalable Vector Graphics. and that's the thing he exported as Data.json file.

[@thehumanity0]

@@ajayghangas1090 It renders as an svg, but it's definitely just a Lottie animation that requires a 200MB library to even run. That's larger than the entire React framework.

[@tiaan_va]

@@thehumanity0 no it actually doesn't. There are ways to add it to your website/app by just using the code itself and nothing extra for it to run. Maybe get a bit more educated on how these are incorporated before you post dumb comments.

[@jhaimarrsanmiguel4758]

Hello! I'm encountering a problem where it doesn't reflect anything on my browser. I've followed all the codes but when I open my html file, nothing is there. Do you guys have any tips on this instance?

[@0tbeptka]

Good tutorial, but will be helpful to see some “basic patterns” how to control this animation On click or mouse over and etc. (i fink need some javaScript implementations?) thnks.

[@ajayghangas1090]

Get a different animation for mouse hover and change it using the control in index.js file.

[@JamesBond-xz5wu]

Thank Gary, Great tutorial. I learned a lot with it. Just a little confure here. Could you help me with it? After follow your tutorial, I have some file here: data.json, index.html, jndex.js, main.css. How we export them to SVG file that can be upload in to website or we only put these code in to website? Sorry, I come from Motion Design, not coder so I don't know how it work.

[@mr7_studio]

following

[@user-xg6rg9hm2d]

good question, but no answer yet((

[@andresuaza]

Can someone explain to me how to make an SVG animation? NOT aa JSON file.

[@mattvideoeditor]

The tutorial starts at 13:40. You are welcome.

[@abhishekhingorani9597]

Did someone notice the logo on Gary's t-shirt which was green originally, was transparent during the tutorial? He went hardcore in ultra keying the green screen! 😂 Big fan of your work though! And yes, I have good experience with After Effects!

[@DesignCourse]

Yeah, I mention it after a few mins of the video that I probably shouldn't wear that shirt again. ;)

[@ShutterlabCreative]

I've heard that the code is not very efficient. How does this work for load time?

[@mattdeanmusic]

Duplicate your footage layer and remove keying, loose mask around the green elements on your shirt, feather the mask and colour correct to match the keyed layer below. Job done.

[@MrSeventhHell]

We definitely need more videos about Lottie like interaction on animation (keyframe controls ?) !

[@NoahCW]

what do i need to do to end up with a .svg file?

[@andresuaza]

Seems that nobody knows!

[@xcaliburG37S]

For absolute positions to center you need the element to have width plus missing height. 😎👍

[@aseperoni2126]

Great tutorial, Which setting do I have to choose in the bodymovin setting so it can be opened? because I've tried making a simple animation in the AE, then rendering using bodymovin, the final result doesn't appear, but I use animation assets from lottiefiles it can be opened

[@csgokul]

Hey Gary, Could you consider making a video for ionic / Angular with Image retrieval and Caching from the firebase storage ... Would be great if you can .. I ve created an app in ionic buy having to always download the images from the storage ..

[@DesignCourse]

Ioinc / Angular and Firebase are on my radar. Thanks!

[@Thesrik23]

I have zero experience in After Experience

[@solo.2449]

After Effects*

[@Microphunktv-jb3kj]

beastie boys - body movin :D

[@daneilgreaves]

Same here

[@cmnweb]

me too, zero effect in after experiencie.

[@oscare3974]

So where is the final SVG file? He got a .Json 🤔 Anyone can explain? Please 😶‍🌫

[@rheinlandrelations]

Great Stuff. I am a Webdev but love After Effects and looking forward to watch you other AE videos. Thanks for your Content :)

[@thevectorbox]

I got some Experience in after effects for like motion design and GIF animations for Spinner, Loaders, I prefer using GIF loader rather than AJAX loader and got my hand on with little VFX

[@rodnem]

I was a motion designer for 3-4y but right now I’ve returned to my first job as ux/ui designer ... I miss animation I used to do in flash. Greensock, snapsvg are a bit to time consuming to get into

[@alexdelker]

Why did you go back to UX/UI?

[@ramy_c148]

hi , my animation contains png and when i try to export it as json i can't ..why ?

[@ChrisMills-AmbientSpace]

I've used AE professionally since 1996. I love it.

[@nadeemmunir6692]

can you make one animation for me ?

[@90AlmostFamous]

Was AE even existed in 1996 ?

[@somedavechannel]

Would love to hear your take on how this compares to Tumult Hype...

[@AaaBbb-jp8pr]

Very interesting, thanks! Can I ask you how you customize font size of left panels in VSCode?

[@Nick.Skipper.Gaming]

Really valuable tutorial. Can you create a tutorial for usage of animations like this along with the state changes of a form. Happy face on a successful validation and a sad face on an unsuccessful attempt. Can we see a video tutorial for that?

[@BrentLagerman]

not sure if this will help anyone but I was getting a cross origin policy error trying to load the json locally. Once I uploaded it to a web server it started working

[@christianmatts_bk]

bodymovin will also export html/js files - are the incorrectly formatted? wondering why write that html/js by hand. but im coming from ae background not a coding background. tks!

[@juditabacinskaite5389]

Hi, thanks so much for this video. However I can not download the Bodymovin it keep me giving an error every time I try to download. Any suggestions? Thanks so much.

[@SergeantMcClain]

I have a decent amount of experience with After Effects however most of it is with video. I have wanted an excuse to do some Kinetic Typography and this seems perfect.

[@noormohammedshikalgar9974]

looks awesome ..... Gary all the best for the journey dude....keep it up

[@noormohammedshikalgar9974]

Hey Garry i just wanna ask you what are you computer configuration as im building one pc so that i can develop content and run smooth softwares....can you tell me ???

[@DesignCourse]

I custom built this PC almost 4 years ago, so anything I recommend will be outdated. I will be doing a new build later this year or next probably. Thanks for your comment though man!

[@yosofya]

Can you please tell me if i want to activate this exact animation but upon click ? Like the one you showed at the beginning of the video

[@bobangogic]

I would be happy if you could do a full crash course on after effects for animations

[@salmanmansha4818]

2 months of experience but I really found it cool Thanks for That

At 21:36, the browser zooms 150%. This is not a code bug. ˆ-ˆ Thanks for the video.

[@indigosay]

Is it not like Lottifile where you should use player and unique link? Can I just download bodymovin js file and use animation without connection to server bodymovin?

[@felipeiglesias]

Excellent. I was trying different softwares and the results were meh. This is great. Thank you!

[@elmirage6005]

I am an Apple Motion guy, how would you proceed in my shoes? Since I dont suppose any such script exists for Motion: switch to AE + Bodymotion for vector animations, or go with Adobe Animate? thank you!

[@karla.aguirre]

Thank you for the tutorial! I'm a beginner at After Effect but loved animation since Animate was called Flash. I would be very grateful for any help regarding the basic use of AE to create and export animation and video resources for mobile apps for my co-workers that are developers. Thanks in advance!

[@aleeshafrancis2188]

Has anyone opened the extension only to have the render button greyed out? I have been scouring the internet for answers, but can't find any solutions.

[@rafaelpayumo9066]

Hello, I am using a Divi theme builder and I exported my animated file from After Effects to get the json file but I don't know where to put the json code in Divi theme. Hope you can help me with the problem.

[@valeria_cora]

+DesignCourse Hi, how can I get an SVG image sequence from a PNG sequence/or GIF/or SWF or video file?

[@gracelelidiasy]

Valeria Cora I have the same same question

[@ineffable7289]

Following the same code but I'm getting blank in live server :S

[@KetVilagKozt]

I have the same result. Could you solve this problem? Thanks

[@DepressionTalks1]

Very helpful tutorial! Thank you!

[@naxaudiovisualmotiondesign6049]

Great! what is the settings do you have been used to render? Thank you.

[@ashishsaxena8608]

where is export svg ??????????????????????????????

[@kaiyu5632]

He says in the beginning "Allows you to export SVG data in the form of JSON". So the file is not ".svg" its ".json"

[@prawnyb]

can you use bodymovin/lottie in combo with something like scroll-out or Laxxx .js library?

[@HarpreetSingh-cz2zh]

Hey! I’m a front end developer and I love animations. I really want to learn AE and motion graphics/interaction design. Will this be overkill or generalizing? I mean should developer specialize in only development? Thank you! Please provide some advice I’m really confused.

[@el-danihasbiarta1200]

if your are wanna learn just do it. it will help you to understand the animation from ui/ux

[@jeramycruz1993]

there a reason why the index.js code doesnt work for dreamweaver?

[@Philson]

Lottie + Ionic seems lit

[@irenart]

Hi First of all thank you for your very cool video !! I wanted to ask where else can I edit everything except Visual Studio? As far as I remember this software is not free .... and I can only use the entire Adobe package at the moment I will be happy if you can respond to me Thank you!

[@RomboutVersluijs]

Just when i needed it, came back to view it again

[@nickfuenmayor3582]

I loved this tutorial! Thanks for sharing your knowledge, greetings from Venezuela, man!

[@robinlefever8510]

Really helpful Gary, thank you very much for this one! ( and others, of course )

[@jenniferhuang8152]

Not a developer, just playing around with lottie so this question must be super basic - but how should you change the js file to show multiple lottie animations?

[@amirkahinpour547]

Not much I wouulldd love to see your tutorials man. THANKK YOUUU SO MUCH, this was amaazzinngg

[@ricardochitagu6280]

gary please do a tutorial on web notifications ....like for specific users.The way facebook does.Awesome tutorial by the way

[@timjurie2769]

Great tutorial!! Works great. Do you know if it's possible to have the json file run when it scrolls into view? I want to include non-looping animations further down my home page so I'm wanting these to play when you scroll down to them rather than when the page loads. Thx

[@pixerize-me]

It is possible. You can use CSS -> animation-play-state: paused; Manipulate SVG animation as you like. Late for a party, but could be helpful to someone.

[@fullmealsdesigner393]

If i use repeaters (CC reptile) only one copy of the animation is exported into json and not all the copy is exported any one know about It ??

[@toxicdesire8811]

Zero experience with after effect sorry. Wow, I commented to do stuff about svg and animations in near future, didn't expect "this" near. Good lord, keep up, and have a nice day :)

[@toxicdesire8811]

Also, one more suggestion, if I'm allowed to, please try to stick with least paid softwares as much as possible. I know stuff can't always be done easily with free tools, but yeah... Not everyone can afford to access that. Thank you. :)

[@DesignCourse]

I'll keep that in mind going forward!

[@valeriafgd]

The extention doesnt appear :c I did everithing you did before, but the extention doesnt appear in winds extetions :c

[@anthonytonev1357]

I'm a pro with AE - I would love more tutorials on bringing interaction to the lottie animation in javascript.

[@pointdotpoint]

this is the future of webdesign. more animations!!

[@srglmr]

can you send the exported svg file ? i need to check if its really what i need

[@jungolmok]

If i want to use it without loop(false), can i replay it, when i code 'click function' in jquery, or is there another way for that?,, I just want to replay svg file, when i click an icon.

[@fareeaasif6684]

Hi, Wonderful tutorial! I need to know how does this work for a character animation? I want to move my character along the length of a webpage.

[@SS4DEUCE]

Have you done this yet?

[@merababa777]

Hello, Can we make svg loop from an specific location, on svgator? please reply :)

[@jithinfrancis7972]

please give the bodymovin plugin download link

[@talk2taher]

What is the ideal frame rate to make animations for json in after effetcs?

[@MOUGO]

Maybe it is just me but the export are images... Images in SVG okay but that means we lost the advantage of "scalable" :/

[@asifdancer]

How can I use this in WordPress? I use page builders to build WordPress websites.

[@InfectedSean]

I used this tutorial with bodymovin 5.4.3... Doesn't work at all now :(

[@rezatalebi4221]

hi mr gary. thank you for best videos. i have 1 important question about this video, can you answer me pls?

[@junaidahmedsiddiqui]

tell me how to animate in aftereffects on run time.? by using lottie?

[@MrKhan-mp7yc]

SVG and JSON File is Same Working ? is There no difference ?

[@gadirosales1209]

One question its the a way to make parts of the animation clickable?

[@leticiac1998]

I need to transform an AF file into an SVG, but when I do that the "puppet" effect that I used doesn't work does anyone have any solutions?

[@muhammadsamiullahsiddiqui5241]

does Bodymovin Support Wave Wrap Effect ?

[@mr7_studio]

Can anyone explain shortly how to turn json to svg?

[@mendistudio]

Any simple way to play lottie animations on scroll?

[@gersany]

This is fantastic, thanks so much and keep up the excellent work.

[@subhamsamir9209]

I never used this softwre like this. Thanks sir

[@MrblondeBEAST]

Really love the plugin, but only a few effects from AE are supported by Bodymovin. For example I tried making an animation with a Wave Warp effect, but that didn't transfer to the svg animation.. :( You think more effects will be supported in the future? Great tutorial btw thanks!!

[@StickStabber]

Basically all Illustrator effects should work, applying effects like Wave Warp will rasterize the shapes which doesn't allow to be exported as svg

[@ghostmateify]

@@StickStabber what are "illustrator effects" exactly? does this mean some of the AE effects can work with bodymovin/lottie ? or none at all? how can I achieve Wave Warp-like effect without using effect?

[@marina.c]

Can I import a illustrator file to after effects, animate it and then axport as svg? would that still count as a vector?

[@dainisdulbinskis8879]

yes, just make sure you select CREATE - create shapes from vector layer.

[@marina.c]

Dainis Duļbinskis thanks!!!!

[@syedzohaibahmed5176]

Totally.

[@levanmanjgaladze3067]

hello, does it works on imported image sequences?

[@Red_Rebel]

5 years and still learning!

[@johnlaroche9314]

I use After Effects but need to create some animated web banners for a client, so I was going to try this. When finished, can I just deliver the files and the client can do with them what they want? or will they not work if they don't use the same player? (Maybe a naive question)

[@tempermode]

This is not an ideal solution for web banners as you need to include the library files which are 250-300kb (last I checked). Banners are usually limited to 150kb.

[@omaraladdin85motiongrtaphic]

I have seven years experience and still learning

[@sameerk1801]

Hello Garry, Why loop animation like "Text Around Globe" isn't working in HTML after rendering through Bodymovin? Kindly help.

[@sameerk1801]

Kindly Help.

[@SWGTBruno]

Notification Squad Unite!! My experience with adobe after Effects are equal to Null... :( but i am always ready to learn more and more..