Wow.. You can Export Adobe After Effects Animations as SVG! Here's how.
Вставка
- Опубліковано 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! - Навчання та стиль
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.
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.
Great Stuff. I am a Webdev but love After Effects and looking forward to watch you other AE videos. Thanks for your Content :)
Very helpful tutorial! Thank you!
Really helpful Gary, thank you very much for this one! ( and others, of course )
I loved this tutorial! Thanks for sharing your knowledge, greetings from Venezuela, man!
This is fantastic, thanks so much and keep up the excellent work.
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?
Not much I wouulldd love to see your tutorials man. THANKK YOUUU SO MUCH, this was amaazzinngg
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!
Fantastic video as always! Thank you!
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)
Excellent. I was trying different softwares and the results were meh. This is great. 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
Thanks! You helped me out just when I needed.
Thanx Gary, this helped me a lot!
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!
Thank you! This helped a lot!
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! 🙏🤩👍
Thanks a lottttt!! Really needed this
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
Is there a way to export an after effects animation as just pure svg?
Love it. Thanks!
Thank you sooo much!! You're a freaking lifesaver!! 😭❤❤
Change those keyframes to "Ease Keyframes" for smooth animation.
We definitely need more videos about Lottie like interaction on animation (keyframe controls ?) !
Great! what is the settings do you have been used to render? Thank you.
Very interesting, thanks! Can I ask you how you customize font size of left panels in VSCode?
Amazing I am gonna try this method on my project
2 months of experience but I really found it cool
Thanks for That
So smooth!
Would love to hear your take on how this compares to Tumult Hype...
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.
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?
Love your videos 😇😇😇
Great content
I'm a pro with AE - I would love more tutorials on bringing interaction to the lottie animation in javascript.
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. ;)
I never used this softwre like this. Thanks sir
Awesome ! ... thanks
I would be happy if you could do a full crash course on after effects for animations
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
Thank you sir. it's awesome 👍👍
This is so....GOOD! thnk u man!
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.
Thank you sir
Thank you very much i actually feel better about AE
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!
For absolute positions to center you need the element to have width plus missing height. 😎👍
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.
Notification Squad Unite!!
My experience with adobe after Effects are equal to Null... :( but i am always ready to learn more and more..
Very nice!
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.
Awesome stuff.
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!
that was really nice, thank you :)
can you use bodymovin/lottie in combo with something like scroll-out or Laxxx .js library?
Pretty sweet!!!!
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.
I've heard that the code is not very efficient. How does this work for load time?
You're the best man.
What is the ideal frame rate to make animations for json in after effetcs?
Man this will save my life
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 achieved it. Thank you
hi , my animation contains png and when i try to export it as json i can't ..why ?
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!
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.
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!
Does anyone have an idea why my animation goes off at the end for a millisecond and shows up again and starts auto-playing? Instead of going smooth and without any interruptions?
Subscribed! How would you do this with React?
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?
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?
Where can we save this as an actual .svg file??
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!!
One question its the a way to make parts of the animation clickable?
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
this is insane omg
wow I actually checked it out two days before this video.
5/10 After Effects Skill level.
Thanks
I've used AE professionally since 1996. I love it.
can you make one animation for me ?
Was AE even existed in 1996 ?
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!
gary please do a tutorial on web notifications ....like for specific users.The way facebook does.Awesome tutorial by the way
can you send the exported svg file ? i need to check if its really what i need
hi mr gary.
thank you for best videos.
i have 1 important question about this video, can you answer me pls?
Hello, Can we make svg loop from an specific location, on svgator? please reply :)
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((
Awesome trick :3
awesome tutorial as alwayes , i have no experience with after effect you can make crash course on it !
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,
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?
does Bodymovin Support Wave Wrap Effect ?
can animation be responsive? on mouse hover or on click?
hello, does it works on imported image sequences?
tell me how to animate in aftereffects on run time.? by using lottie?
The extention doesnt appear :c
I did everithing you did before, but the extention doesnt appear in winds extetions :c