Wow.. You can Export Adobe After Effects Animations as SVG! Here's how.
ฝัง
- เผยแพร่เมื่อ 3 ต.ค. 2024
- 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!
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.
Have never used After Effects but really looking forward to the Tuts.
SAMSHAS THOSE BATTON
TY FRO SUBS!
but when i smash the subscribe button, it's popup a warning message to unsubscribe :(
are you still taking questions?
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.
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.
If you've installed the addon, skip to 13:40 for the Export Process. Thanks for the video!
Wow.. You can Export Adobe Effects Animations as some shitty code and there's absolutely NO SVG file appearing in the video!
@@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?
Is there a way to export an after effects animation as just pure svg?
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)
We definitely need more videos about Lottie like interaction on animation (keyframe controls ?) !
2 months of experience but I really found it cool
Thanks for That
Just when i needed it, came back to view it again
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!
Yeah, I mention it after a few mins of the video that I probably shouldn't wear that shirt again. ;)
Where can we save this as an actual .svg file??
I did not notice at what second you get the svg file?
You don't, title was missleading
Right ... no SVG file?
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.
@@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.
@@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.
Change those keyframes to "Ease Keyframes" for smooth animation.
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! 🙏🤩👍
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.
Get a different animation for mouse hover and change it using the control in index.js file.
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.
following
good question, but no answer yet((
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
I have zero experience in After Experience
After Effects*
beastie boys - body movin :D
Same here
me too, zero effect in after experiencie.
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?
where exactly you mentioned exporting svg here, its totally misleading man dissapointed
So where is the final SVG file? He got a .Json 🤔 Anyone can explain? Please 😶🌫
Why don't let users export in svg file ?
If you find the answer, PLEASE let me know
@@andresuaza Well svg does not really support animations to that degree. Lottie is modifying the svg during the animation.
Thanx Gary, this helped me a lot!
Can someone explain to me how to make an SVG animation? NOT aa JSON file.
The tutorial starts at 13:40. You are welcome.
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.
Amazing I am gonna try this method on my project
svg json big difference dog
Thank you very much i actually feel better about AE
Answer: I have been using After effects for 12 years now.
Notification Squad Unite!!
My experience with adobe after Effects are equal to Null... :( but i am always ready to learn more and more..
Man this will save my life
At 15:50, you do something without explaining. Got completely lost, coudn't complete tutorial. (I'm a AE user, don't know much about code or even what software you were in.)
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
So smooth!
Everything we create on computers is code, if you think about it. I’m glad the trend is to keep it as code.
Would love to hear your take on how this compares to Tumult Hype...
You're moving too quickly through the code editing portion. This video is clearly targeted towards AE users but you blast through that as if every animator knows their way around a code editor.
Hey, you can now see a preview of your json file here : lottiefiles.com/
It's quicker than code it ^^
Video said SVG but its showed .jason. or Lottie animation, which nothing of mentioned in the title. this is totally misleading, also original relate won't get found for this type of misleading title and thumbnail. Give me my time back." I report with this. May be next time you will created more related video. Thanks
can you send the exported svg file ? i need to check if its really what i need
Answer for today's question :-
I'm a beginner for after effects............
where is export svg ??????????????????????????????
He says in the beginning "Allows you to export SVG data in the form of JSON". So the file is not ".svg" its ".json"
I've heard that the code is not very efficient. How does this work for load time?
Thank you sir
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!
sorry, but in the end, you don´t get a .svg-file. Don´t understand, why nobody could explain me properly, how it works. every solution looks the same. a html-file with the animation code enbedded, but no encapsuled svg-file.
At 21:36, the browser zooms 150%.
This is not a code bug. ˆ-ˆ
Thanks for the video.
This is misleading has f-ck I love Lottie but this is NOT SVG animation. SVG animation is coded into the svg itself, this runs on .json, thus compatibility is much I will get everyone I know to dislike this video, as it spreads misinformation. Or you can change the title to something apropriate. I don't believe you're trying to be malicious, just went too far on clickbait title
Totally Misleading title just to get more views. The video is supposed to teach how to save the animation as .svg file.
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?
Tool is garbage. I have an animation with nothing but text and it doesn't work. Utter trash.
Maybe it is just me but the export are images... Images in SVG okay but that means we lost the advantage of "scalable" :/
This is real shit. SVG? at least you should know the difference between lottie and svg. shame
Cool
but I search a plugin for export simple svg animation by CSS technic
Awesome stuff.
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 ??
wow I actually checked it out two days before this video.
5/10 After Effects Skill level.
Following the same code but I'm getting blank in live server :S
I have the same result. Could you solve this problem?
Thanks
SVG and JSON File is Same Working ? is There no difference ?
hi , my animation contains png and when i try to export it as json i can't ..why ?
I have seven years experience and still learning
+DesignCourse Hi, how can I get an SVG image sequence from a PNG sequence/or GIF/or SWF or video file?
Valeria Cora I have the same same question
Can anyone explain shortly how to turn json to svg?
everything is blank, maybe the latest update is broke
there a reason why the index.js code doesnt work for dreamweaver?
please give the bodymovin plugin download link
This video doesnt show how to use it in your design file
OMG!!! WHY DONT YOU HAVE A FINISHED FILE FOR THIS? 14 minutes for the information that you need a plugin. OMG!!!
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
that's great but that is not a SVG! that's JSON+JS!
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.
what do i need to do to end up with a .svg file?
Seems that nobody knows!
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 ..
Ioinc / Angular and Firebase are on my radar. Thanks!
Very helpful tutorial! Thank you!
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.
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
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.
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.
if your are wanna learn just do it. it will help you to understand the animation from ui/ux
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
I think you making videos too long.
Any simple way to play lottie animations on scroll?
Lottie owned by airbnb, did'nt knew that..
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?
Excellent. I was trying different softwares and the results were meh. This is great. Thank you!
Check out the folder names at 14:15 LOL
The swallowing noise is so irritating
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?
hi mr gary.
thank you for best videos.
i have 1 important question about this video, can you answer me pls?
The invisible breast. misterious :)
looks awesome ..... Gary all the best for the journey dude....keep it up
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 ???
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!
Can I import a illustrator file to after effects, animate it and then axport as svg? would that still count as a vector?
yes, just make sure you select CREATE - create shapes from vector layer.
Dainis Duļbinskis thanks!!!!
Totally.
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
Hello, Can we make svg loop from an specific location, on svgator? please reply :)
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.
but this saves the animation as a json not an svg, now I am confused
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!
Dose this work with dreamweaver?
Lottie + Ionic seems lit
It engulfs RAM more than chrome
hello, does it works on imported image sequences?