Create Lottie Animations in After Effects - The Ultimate Guide!
ฝัง
- เผยแพร่เมื่อ 21 ธ.ค. 2019
- 🚀 Get 2 free months on Skillshare Premium & watch my Course for free:
skl.sh/2TVhf8z
In this tutorial, we will create Lottie Animations and After Effects. Lottie files can be used in Apps and Websites to show animations.
🚀 The Ultimate Guide to Become a Product Designer: learnproduct.design
🚀 Create an account on Mobbin for free:
mobbin.com/?referrer_workspac...
Project Files:
gum.co/VWUf
Lottie Files:
lottiefiles.com/
Lottie Files plugin for After Effects:
lottiefiles.com/ae
BodyMovin Plugin for After Effects:
aescripts.com/bodymovin/
Lottie Documentation by Airbnb:
airbnb.io/lottie/#/
Webflow and Lottie:
university.webflow.com/course...
Everyday Icon Set by Chris Gannon:
lottiefiles.com/marketplace/e...
-----------------------------------------
UI/UX Design Tutorials:
• The Mega Product Desig...
Webflow Course for Beginners:
• Webflow Course for Beg...
Photoshop Tutorials:
• Photoshop CC Tutorials
Illustrator Tutorials:
• Illustrator CC Tutorials
After Effects Tutorials:
• After Effects CC Tutor...
UI Design Tutorials:
• UI Animation/Interacti...
Design Resources, Tools and Softwares:
• Design Resources, Tool...
Adobe XD CC Tutorials:
• Adobe XD CC Tutorials
eSports Design Tutorials:
• eSports Design Tutorials
--------------------------------------------------------------------------------------------
Contact me :
Twitter : / kvschethan
Facebook : / designpilot
Mail : designpilot21@gmail.com
Portfolio : behance.net/chethankvs
Instagram : / design_pilot
Discord: / discord
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#aftereffects #lottie #animation - ภาพยนตร์และแอนิเมชัน
Thanks for all the details explanation. Helps me a lot!
I am soooo glad you mentioned the "Release to layers > sequence" step!! I would have been lost without it. Thanks for being so thorough!
Hands down, to the one of the most detailed Lottie animation video I've seen on TH-cam as of now. I really thank you for making this video. I'll surely use this to create my own slick web portfolio with fancy animations.
Quick tip: at 9:38 his order of layers is upside down and needing to be flipped (because he selected them bottom-to-top). Layers will paste in the order they were selected. So, if you want to quickly flip over the whole stack of layers, select the bottom layer, then shift-select the top layer. Cut them out, and then hit paste to put them back in.
Greg - Antifreeze Design
THANK YOU!! I WAS SO confused and lost. Thank you.
Thank you.
Huge thx
24:00 explanation of how to export starts.
The beginning with the redundant "super pumped for this tutorial" cringey moment made me laugh hard, I loved it 🤣. Great tutorial!
I come back to this video EVERY time I do animation work for a client.
Thank you!!
Finally someone that talks as fast as I ingest. Wicked video.
😂
The best tutorial on Lottie and Bodymovin. Amazing work 👏Thank you!
Amazing video, just what I neeeded! Very dinamic and well explained. Thank you very much for that!
Absolutely wonderful, thanks for taking the time to put this together! :D
My pleasure Nika
Fantastic tutorial! Thank you! I really appreciate how you covered everything
The order when you paste around 9.40 is because you selected the layers from te bottom to the top, before you copied them. If you select the top layer first and downward, ae will paste the layers in the right order
26:40 Nice Work. Converting wiggle expression to position Animations
This is an amazing tutorial!!! thank you so much
thank you so much! this brings new horizons!
Glad to hear thay
Great video! Learned a lot here, thanks. Subscribed
Very thorough tutorial thank you so much :)
Bro, this video was exactly what I needed... thank you so much, it was extremely helpful! Especially the "convert expressions to keyframe" part, because I'm using a third party plugin called Animation Composer 3... now knowing that I use their preset animations and convert them to keyframes, well, you've made my day! :) Keep up the good work
Can i use puppet tool on after effects bro?
Thanks for sharing! you helped me a lot with this video :)
Thank you so much! This was a life-saver
Great Guide! Thanks!
OMG it helps me so much !!!! Thank you !
Glad I found this, thanks!
Thanks for this awesome tutorial!! 👍🏻
✌️
Smashing tutorial dude.
Great tutorial, thank you!
Awesome tutorial
incredible!! so thankful!
Thanks
that was awesome, thanks
love your video, helpful for me
Well done man. Cheers!
Thanks Shashank
"Only use path keyframe animations when absolutely have to. Those eat up the most space because its adding data for each vertex on each keyframe." this is from the airbnb documentation for After Effects
Can you please slow down a bit, we are not in a hurry :). Awesome Tutorial
Thank you so much ♥
Cool tutorial. My english not good enough, but i get every step. Thanks!
very helpful thanks
Thank you so much! ^_^ :*
very good and informative video
super easy, super awesome, super pumped...
Hi ! thank you for the video !!! ;)
Thank you very much ❤️😎
awesome tutorial
golden tips
I´d love to see how you created the confetti.
Coming from Flash/Animate, this AE + several plugins + constant support-sheet referencing is very frustrating 😅
its very helpful video tutorial 👍
Thanks for the tutorial! On the supported list, what's the difference between Web HTML and Windows?
Thanks a lot!
Thanks for the video
I have a question, how can we prevent others from copying Json files and accessing all of its layers in Aftereffect?
Как я рад нейронным сетям от яндекса! Могу слушать твои слова в видео на своём языке)))
buen video pana miguel
make ui design for Zomato ,swiggy etc. like you did for airbnb so that we can learn more design principles and understand how to use figma more effectively.
You can use the same principles of Airbnb for Swiggy and Zomato
This looks so cool. It opens so many possibilities. Does anyone know, if null objects work with Lottie?
Yes. They do
@@DesignPilot I thought you can't use expressions, how good will a null be without it?
one of my question please I am using adobe animation and exporting svg animation but issue that when animation is repeat and refreshing. Refreshing is my biggest problem. what is solution this problem?
Hey man love your work, one question. How did you do the confetti effect in the animation you showed on Dribbble?
Animated a single piece and duplicated it multiple times
@@DesignPilot cool, Thanks man!
HELLO great video but i ve a question ,anyone knows how to export as a gif without background, cause i olny export with a background and if i put transparency the program export with a black background, i really apreciate your answers
Thanks for the tutorial. It’s super helpful. Do you know if there is any other alternative to time reverse animation? It’s not supported in Lottie and I didn’t find any ways to reverse the animation layer.
You will have to reverse the key frames
select all the keyframes of the layer and then right-click, go to the last option reverse keyframes, and all good to go!
Thanks so much for this awesome tutorial! I'm trying to create a particle animation for a client as a lottie file and it's been tricky as I've had to animate each particle manually. Is there any way around this? I mean we can't really use effects. Any advice would be appreciated
Manually create if for a few of the particles
Then duplicate the particles multiple time. You can use a thanks object to group the duplicate sets
@@DesignPilot Thanks so much! This is a great idea to solve it, instead of animating large amounts of particles
thnx
Hi, I would like to find out if you can help me, I have made a really basic animation using Adobe Animate imported that file into After Effects then converted that to a JSON file using Bodymovin however it does not display when I add the JSON file to a website or preview it in Lottie If someone can assist me that would be great.
Design Pilot, dude....thank you.
Thank you for this guide! I am able to get most animations working but can't get bendy animations to work because it does not support cc bend. Do you know how you would create bend animations?
You can't use any effects
@@DesignPilot Yeah I read about that, but a lot of the animations on lottiefiles.com bend and move so how would they be doing that?
Change the shape of the shape layer. Is a lot of manual work
Hi, i have the plugin in AE, but in my LottieFile's window don't appere the composition, why is that issue?
Hi there
Thanks for the video
I was wondering can we convert a 3d file like fbx to lottie
You have to render the animation out as a video file and the use Lottie to export as a PNG sequence
Thanks bhai!
❤️
Cool
Thank you
When I select the envelope back path, I do not see selectable vertices, just one solid group. ??
Click on the pen tool or press A
Question here: When I import my .Ai file and convert shapes from vector, im getting gray solid plates instead of shapes, anyone know what can I do to solve this?
can you tell me the differences between after effect, lottie and rive, they don't all work the same, which one do you think I should use for flutter dec
Use After Effects to create the Lottie Animation
Both my lottie and bodymovin extensions are not exporting any json file :(
you saved my ass thanks
Why is my vector not rasterizing when I convert it into an animation ? The quality drops significantly. Please reply. Really could use some help.
It could be your composition resolution
@@DesignPilot Thanks for replying.
But the resolution is at 1920*1080. Still I am facing the same issue.
Can you suggest something.
I am not able to put it in my web page due to bad quality.
Hey! thank you very much for your tutorial. I tried my first lottie animation. With bodymovin, the composition was rendered successfully, also can be previewed. But when I tried to render with LottieFiles, it gave error. Why is that? Do you have any idea?
Not really sure
Not really sure
Hi! How do you export gif into a json file?
Hi there, I'm having issues installing Bodymovin, when I open it, it's just a black screen with no files. Am I doing something wrong?
Bodymovin no longer works. Lottie files is what you need ✌️
@@DesignPilot dude I have the same problem... but in my case, the Lottie Files window doesn't show me any files :(
Hi, I am trying to render a 30 second animation but its not rendering , last two hour been seeing rendering button , can you help for longer animation lottie exports
Might be a problem with your system and not Lottie
I exported Animation file into HTML and JSON, but my client says that they have trouble adding animation to website, i don't know which file format should i deliver him?? Which format is compatible for website?
JSON only
@@DesignPilot he didnt ask for the file....his asking how to implement the file
Music and Animation no, he pretty clearly asked for the file type.
If your client has Wordpress → th-cam.com/video/YDHqfO4CwP8/w-d-xo.html
Can I save in tgs format on Lottie?
Hello, when I am using particles plugin for making confetti, I am not able to render in lottie files in after effects. Is there any solution?
Lottie does not recognise plugins. You need individual shape layers
@@DesignPilot Thankyou
SVG and JSON File is Same Working ? is There no difference ?
I've already requested the LottieFiles. However, it said I am on the waiting list. Do you know how long I need to wait for it?
Maybe tweet them on Twitter.
I could place the files on a drive if you want them
Tyron Anderson Thank you Tyron. I have gotten it already:)
my lottie animation looks choppy on the phone smooth everywhere. I thought maybe it had something to do with phone's refresh rate. But then on a preview with lottie app the animation is smooth. But when I tap on it to open, animation then becomes choppy as if there's not enough frames inbetween. Any work around ??
If it’s fine in the Lottie app then it’s fine. Try to play it on the browser too and see
@@DesignPilot it is smooth on browser. Thank you so much for the tutorial and prompt reply
why does when I render with lottie plugin, the final animation becomes blurry? as well as I put in lottie website. anyone can help me?
As long as it looks fine in the website, you don’t have to worry about anything
Hi
You mentioned that every effect from the presets will be used after rendering with lottie plugin.
But it's not displaying the effect I used although its a simple effect. How to fix this? please help
Which preset did you use?
@@DesignPilot Turbolent displacement
Oh. That won’t work. You need to see the list that’s there on the Lottie website which I showed in the video.
i cant export my animation which contains a png with bodymovin why ?
Lottie does not support PNG
can we create animation like GooglePay (after payment) or like facebook's "Text Delight"?
Yes!
@@DesignPilot is this possible to convert GIF to LottieFiles??
@@devrajsingh7207 Yes!
Video starts at 24:00
Hi. Can i use puppet tool in after effects for telegram sticker?
No idea
@@DesignPilot how about puppet in after effects for lottie?
That wont work
@@DesignPilot oh. Thank bro so much
why did you easy ease the animation of the mask? the mask wasnt moving anywhere so whats the point of that?
True. Could have skipped that
I'm interesting with motion graphics. Is that can be good passive income? Anyone can help ?
Does it woks just by vector images?
Yes
how to render particle world effect in Lottie animation
Not possible. However you can render as a video and export an image sequence as a Lottie. Watch my Lottie Course
can we create lottie animations using png sequence in AE?
Yes.
@@DesignPilot I tried but it is not happening 😅
i tried both the plugins Lottie and bodymovin. they render a .jason but it is blank😅
Watch Saptarshi Prakash’s latest videos on Lottie. You’ll be able to get an idea
Plugin is not loading in after effects
Not even able to import into ae man. Idk what went wrong
please make more videos on Figma.
What kind of videos do you want?
@@DesignPilot make ui design for Zomato ,swiggy etc. like you did for airbnb so that we can learn more design principles and understand how to use figma more effectively.
hi bro is there any way to convert gif to tgs ??
No idea
are they responsive?? how about file size??
Yes they are. Because they are vector based. File size is very less.
@@DesignPilot damn.... Of course 😳
hi
✌️🙏