Create Lottie Animations in After Effects - The Ultimate Guide!
Вставка
- Опубліковано 28 сер 2024
- 🚀 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.d...
🚀 Create an account on Mobbin for free:
mobbin.com/?re...
Project Files:
gum.co/VWUf
Lottie Files:
lottiefiles.com/
Lottie Files plugin for After Effects:
lottiefiles.co...
BodyMovin Plugin for After Effects:
aescripts.com/...
Lottie Documentation by Airbnb:
airbnb.io/lott...
Webflow and Lottie:
university.web...
Everyday Icon Set by Chris Gannon:
lottiefiles.co...
-----------------------------------------
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/ch...
Instagram : / design_pilot
Discord: / discord
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#aftereffects #lottie #animation
Finally someone that talks as fast as I ingest. Wicked video.
😂
Hands down, to the one of the most detailed Lottie animation video I've seen on UA-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
I am soooo glad you mentioned the "Release to layers > sequence" step!! I would have been lost without it. Thanks for being so thorough!
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!!
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
Coming from Flash/Animate, this AE + several plugins + constant support-sheet referencing is very frustrating 😅
Thanks for all the details explanation. Helps me a lot!
The best tutorial on Lottie and Bodymovin. Amazing work 👏Thank you!
"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
Smashing tutorial dude.
Can you please slow down a bit, we are not in a hurry :). Awesome Tutorial
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?
Glad I found this, thanks!
Amazing video, just what I neeeded! Very dinamic and well explained. Thank you very much for that!
Great tutorial, thank you!
OMG it helps me so much !!!! Thank you !
Great video! Learned a lot here, thanks. Subscribed
Thank you very much ❤️😎
Absolutely wonderful, thanks for taking the time to put this together! :D
My pleasure Nika
I´d love to see how you created the confetti.
Thank you so much ♥
Thanks for sharing! you helped me a lot with this video :)
its very helpful video tutorial 👍
Thank you so much! This was a life-saver
Fantastic tutorial! Thank you! I really appreciate how you covered everything
Cool tutorial. My english not good enough, but i get every step. Thanks!
This is an amazing tutorial!!! thank you so much
Design Pilot, dude....thank you.
Hi ! thank you for the video !!! ;)
that was awesome, thanks
14:38 Masking for Lottie
Very thorough tutorial thank you so much :)
incredible!! so thankful!
Thanks
very good and informative video
super easy, super awesome, super pumped...
Great Guide! Thanks!
thank you so much! this brings new horizons!
Glad to hear thay
thnx
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
Thanks a lot!
Как я рад нейронным сетям от яндекса! Могу слушать твои слова в видео на своём языке)))
love your video, helpful for me
you saved my ass thanks
very helpful thanks
Thanks for this awesome tutorial!! 👍🏻
✌️
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.
Video starts at 24:00
Thank you so much! ^_^ :*
awesome tutorial
golden tips
Awesome tutorial
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!
❤️
buen video pana miguel
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
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?
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
Thanks for the tutorial! On the supported list, what's the difference between Web HTML and Windows?
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
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?
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
Well done man. Cheers!
Thanks Shashank
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!
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
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.
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
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
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?
i cant export my animation which contains a png with bodymovin why ?
Lottie does not support PNG
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?
SVG and JSON File is Same Working ? is There no difference ?
Does it woks just by vector images?
Yes
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 :(
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!
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
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
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
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 → ua-cam.com/video/YDHqfO4CwP8/v-deo.html
Both my lottie and bodymovin extensions are not exporting any json file :(
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
I'm interesting with motion graphics. Is that can be good passive income? Anyone can help ?
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
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.
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?
Plugin is not loading in after effects
Hi! How do you export gif into a json file?
Can I save in tgs format on Lottie?
Lottie came up with Merge Path issues, even thought I followed the tutorial to a tee
Hmmm. Must be a bug I believe
Try exporting them as separate layers and then put them into a pre compmposition
@@DesignPilot From the Illustrator file?
Can be anywhere
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:)
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!
hi bro is there any way to convert gif to tgs ??
No idea
hi
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.
What you don't know can you tell me? you know everything, how one person can learn and tech everything??
😂😂😂
Not even able to import into ae man. Idk what went wrong