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.
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.
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'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.
@@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?
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.
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! 🙏🤩👍
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)
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!
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.
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.
6 років тому+1
At 21:36, the browser zooms 150%. This is not a code bug. ˆ-ˆ Thanks for the video.
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?
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!
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.
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.
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 :)
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. :)
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 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
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?
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
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!
thanks for this breakdown! I can't help but to feel annoyed that bodymovin still makes you do most of post-render work manually but then again, that's why it's free!
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 ..
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?
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.
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!
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 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?
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.
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.
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!
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!
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?
If you've installed the addon, skip to 13:40 for the Export Process. Thanks for the video!
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.
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'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.
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?
I've used AE professionally since 1996. I love it.
can you make one animation for me ?
Was AE even existed in 1996 ?
Change those keyframes to "Ease Keyframes" for smooth animation.
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.
2 months of experience but I really found it cool
Thanks for That
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! 🙏🤩👍
We definitely need more videos about Lottie like interaction on animation (keyframe controls ?) !
Is there a way to export an after effects animation as just pure svg?
Just when i needed it, came back to view it again
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)
this is the future of webdesign. more animations!!
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!
Great Stuff. I am a Webdev but love After Effects and looking forward to watch you other AE videos. Thanks for your Content :)
Excellent. I was trying different softwares and the results were meh. This is great. Thank you!
I have zero experience in After Experience
After Effects*
beastie boys - body movin :D
Same here
me too, zero effect in after experiencie.
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((
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.
At 21:36, the browser zooms 150%.
This is not a code bug. ˆ-ˆ
Thanks for the video.
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?
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. ;)
For absolute positions to center you need the element to have width plus missing height. 😎👍
The tutorial starts at 13:40. You are welcome.
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.
Really helpful Gary, thank you very much for this one! ( and others, of course )
5 years and still learning!
Where can we save this as an actual .svg file??
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.
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.
Not much I wouulldd love to see your tutorials man. THANKK YOUUU SO MUCH, this was amaazzinngg
I never used this softwre like this. Thanks sir
gary please do a tutorial on web notifications ....like for specific users.The way facebook does.Awesome tutorial by the way
You're the best man.
Lottie + Ionic seems lit
I loved this tutorial! Thanks for sharing your knowledge, greetings from Venezuela, man!
Amazing I am gonna try this method on my project
I would be happy if you could do a full crash course on after effects for animations
Would love to hear your take on how this compares to Tumult Hype...
Thank you sooo much!! You're a freaking lifesaver!! 😭❤❤
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 :)
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. :)
I'll keep that in mind going forward!
Fantastic video as always! Thank you!
Man this will save my life
hi mr gary.
thank you for best videos.
i have 1 important question about this video, can you answer me pls?
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'm a pro with AE - I would love more tutorials on bringing interaction to the lottie animation in javascript.
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
Why did you go back to UX/UI?
Very helpful tutorial! Thank you!
Thanx Gary, this helped me a lot!
Thanks a lottttt!! Really needed this
Learned AE this year
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?
So where is the final SVG file? He got a .Json 🤔 Anyone can explain? Please 😶🌫
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
I have seven years experience and still learning
Love it. Thanks!
Love your videos 😇😇😇
Great content
Did really nobody say "Bless You"? Well bless you :)
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!
wow I actually checked it out two days before this video.
5/10 After Effects Skill level.
Thank you very much i actually feel better about AE
This is fantastic, thanks so much and keep up the excellent work.
This is so....GOOD! thnk u man!
So smooth!
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.
Have you done this yet?
that was really nice, thank you :)
Very interesting, thanks! Can I ask you how you customize font size of left panels in VSCode?
thanks for this breakdown! I can't help but to feel annoyed that bodymovin still makes you do most of post-render work manually but then again, that's why it's free!
Everything we create on computers is code, if you think about it. I’m glad the trend is to keep it as code.
Notification Squad Unite!!
My experience with adobe after Effects are equal to Null... :( but i am always ready to learn more and more..
I've heard that the code is not very efficient. How does this work for load time?
Thank you! This helped a lot!
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!
To anyone new to lottie, beware of expressions. Convert to keyframes if you experience any weirdness.
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?
Awesome stuff.
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
Awesome ! ... thanks
Very nice!
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!
Thanks! You helped me out just when I needed.
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!!
Basically all Illustrator effects should work, applying effects like Wave Warp will rasterize the shapes which doesn't allow to be exported as svg
@@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?
Pretty sweet!!!!
0 experience in AE.. but learning, thanks!
Thank you sir. it's awesome 👍👍
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.
Answer for today's question :-
I'm a beginner for after effects............
Can someone explain to me how to make an SVG animation? NOT aa JSON file.
Awesome!!
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.
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!
Subscribed! How would you do this with React?
Great! what is the settings do you have been used to render? Thank you.
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!
Thank you sir
this is insane omg
Dude I want that monitor that is behind you. Is that a Wacom?
Yes, cintiq 22hd