Wow.. You can Export Adobe After Effects Animations as SVG! Here's how.
HTML-код
- Опубликовано: 26 июн 2018
- 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: logodesigner
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! 
Хобби
![NOSFERATU - Official Teaser Trailer [HD] - Only In Theaters December 25](http://i.ytimg.com/vi/b59rxDB_JRg/mqdefault.jpg)
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?
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!
Great Stuff. I am a Webdev but love After Effects and looking forward to watch you other AE videos. Thanks for your Content :)
I loved this tutorial! Thanks for sharing your knowledge, greetings from Venezuela, man!
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.
Not much I wouulldd love to see your tutorials man. THANKK YOUUU SO MUCH, this was amaazzinngg
Very helpful tutorial! Thank you!
Really helpful Gary, thank you very much for this one! ( and others, of course )
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!
This is fantastic, thanks so much and keep up the excellent work.
Just when i needed it, came back to view it again
Thanks! You helped me out just when I needed.
Excellent. I was trying different softwares and the results were meh. This is great. Thank you!
We definitely need more videos about Lottie like interaction on animation (keyframe controls ?) !
Fantastic video as always! Thank you!
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
Thanx Gary, this helped me a lot!
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. ;)
Thank you! This helped a lot!
Change those keyframes to "Ease Keyframes" for smooth animation.
Thank you sooo much!! You're a freaking lifesaver!! 😭❤❤
Love your videos 😇😇😇
Great content
Thanks a lottttt!! Really needed this
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)
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!
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! 🙏🤩👍
So smooth!
Amazing I am gonna try this method on my project
I'm a pro with AE - I would love more tutorials on bringing interaction to the lottie animation in javascript.
I never used this softwre like this. Thanks sir
Thank you very much i actually feel better about AE
This is so....GOOD! thnk u man!
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.
Love it. Thanks!
Thank you sir. it's awesome 👍👍
Notification Squad Unite!!
My experience with adobe after Effects are equal to Null... :( but i am always ready to learn more and more..
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
2 months of experience but I really found it cool
Thanks for That
Awesome stuff.
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?
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!
Awesome ! ... thanks
I've used AE professionally since 1996. I love it.
can you make one animation for me ?
Was AE even existed in 1996 ?
Would love to hear your take on how this compares to Tumult Hype...
gary please do a tutorial on web notifications ....like for specific users.The way facebook does.Awesome tutorial by the way
For absolute positions to center you need the element to have width plus missing height. 😎👍
Man this will save my life
i achieved it. Thank you
I would be happy if you could do a full crash course on after effects for animations
Awesome trick :3
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.
awesome tutorial as alwayes , i have no experience with after effect you can make crash course on it !
Very interesting, thanks! Can I ask you how you customize font size of left panels in VSCode?
that was really nice, thank you :)
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.
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!
Awesome!!
this is insane omg
wow I actually checked it out two days before this video.
5/10 After Effects Skill level.
Great! what is the settings do you have been used to render? Thank you.
You're the best man.
Very nice!
Learned AE this year
this is the future of webdesign. more animations!!
Pretty sweet!!!!
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
Lottie + Ionic seems lit
Thank you sir
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
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!
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 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!
Where can we save this as an actual .svg file??
At 21:36, the browser zooms 150%.
This is not a code bug. ˆ-ˆ
Thanks for the video.
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?
5 years and still learning!
Subscribed! How would you do this with React?
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 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!
I have zero experience in After Experience
After Effects*
beastie boys - body movin :D
Same here
me too, zero effect in after experiencie.
Nice Sir
Thanks
hi mr gary.
thank you for best videos.
i have 1 important question about this video, can you answer me pls?
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.
can you use bodymovin/lottie in combo with something like scroll-out or Laxxx .js library?
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.
Did really nobody say "Bless You"? Well bless you :)
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.
I've heard that the code is not very efficient. How does this work for load time?
After effects.. yes please! 😀
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?
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
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?
What is the ideal frame rate to make animations for json in after effetcs?
The tutorial starts at 13:40. You are welcome.
I have seven years experience and still learning
super!
Can someone explain to me how to make an SVG animation? NOT aa JSON file.