How to Create Lottie Animation without Adobe After Effects?
ฝัง
- เผยแพร่เมื่อ 3 ก.ค. 2024
- 🔥 Start using Figma for FREE → bit.ly/TryFigma
🔗 Join our design community here → bit.ly/DX-Community
In this video, I'll be showing you how to create Lottie animation without After Effects. I will be using a tool called Haiku Animator to create a simple animation and then be uploading it on Lottiefiles. I'll also be showing you a sample of how to use it as a gif on Figma to create a cool loading screen.
#LottieFiles #LottieAnimations #LottieWithoutAfterEffects
Mic - Boya BYM1: amzn.to/2Wx6zhk
Other Computer Accessories: amzn.to/3q8vLaO
If DesignXstream Tutorials has helped you in any way & you want to contribute something back feel free to buy me a coffee! And again it is not mandatory just a free choice for you.
Link: www.buymeacoffee.com/DesignXs...
Thank you! 😊
🔴 Don't forget to Subscribe. Trust me it's absolutely FREE - goo.gl/c5vRzS 😅
🎉 Join our Whatsapp Community now, it's FREE: bit.ly/DX-Community
⏱️Timestamps:
0:00 Intro
0:10 About LottieFiles
0:36 Process of creating on After Effects
1:20 About Haiku Animator & Installation
2:20 Getting Started
2:54 Creating Assets on Figma
5:16 Starting to Animate
10:12 Output Preview
10:24 Exporting to Lottie.JSON
11:02 Previewing on LottieFiles.com
11:36 Exporting as GIF
11:58 Creating cool loader screen on Figma
Relevant keywords: how to create lottie animation without after effects, how to create lottie animation json, how to create lottie animation online, easy way to create lottie animation without after effects, how to create lottie animation easily, quick way to create lottie animation, using lottie animation as gif in figma, using gif in figma for cool loading screen, how to make lottie animation without adobe after effects, easiest way to create lottie animation, lottie animation without after effects.
You have got some ideas or topics in mind? Please do comment below we will make sure to check it out and do it if possible 🥳
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Stay updated with our videos by following us at:
↪︎ LinkedIn - / techzclub
↪︎ Instagram - / techzclub
↪︎ Facebook - / techzclub
↪︎ Twitter - / techzclub
↪︎ Website - TechzClub.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Note: Some links here may be affiliate links. I will earn a small portion of those sales at no additional cost to you. Thank you for supporting DesignXstream. 😊
🔴 Update: I recently discovered 2 more tools that let you create lottie.
1 Paid & 1 FREE open-source software.
Link: th-cam.com/video/3D4nYtfVZb4/w-d-xo.html
This is super cool! Removing all the dependencies and complexities from the AE!
Hey Meet, Yes this is best and cheaper than AE for people who just want to make animation for mobile and web interactions!
Links:
Haiku Animator: www.haikuforteams.com/
Loading Animation: lottiefiles.com/33633-loading-text-indicator
BRILLIANT, THANK YOU!!!
Cheers! ✌🏼
Awesome awesome awesome.... all awesome
Hey, Glad you liked it :)
Very nice tutorial and workflow. Thanks for the share.
Thanks a lot for your comment. Glad you liked it! :)
Thank you. I will give this a try today
There is a new way to do this directly from Figma. Check our latest videos!
I’ve been lookin for this exact tool!! Thank u sir
Cheers ✌🏼
This is awesome, and just what I need right now. Thanks for sharing! 😃
Glad you liked it! :)
Extreeeemely useful video!!! and thank you so much for your help offline Definitely will keep your channel as fav and will follow your work and discoveries 👍👍👍
Glad you found it helpful! Cheers ✌🏼
Thanks for this!
Cheers!
Thank's a lot. Very nice and useful video. I'll be waiting a new lessons:)
Thanks for your comment! I'm glad you found it helpful! :)
Superbb cool !! thanks for your sharing ..
Hey Samad, Glad you liked it! :)
Nice!
Thank you! :)
Awesome video, bro. Definitely going to incorporate something similar into my UX portfolio
yeah! do give it a shot it's super simple to make animation on it. And also do upload it on lottiefiles its a huge community! 👍🏼
@@DesignXstream Appreciate the advice, man. Thank you, I will do
Great tutorial
Thank you!
thanks great tutorial!
Hey Jelani, Thank you, I'm glad you found it helpful :)
Just checked your channel the thumbnails are damn attractive will check the content too soon! 🤘🏼
@@DesignXstream Haha thanks! I haven't made content in some time but that will change soon! Thanks for the kind words :)
Sending you lots of love ❤️🙇
Cheers ✌🏼
thanks for sharing ~~
Cheers! 🤘🏼
Nice job
Hey Sam, Glad you found it helpful :)
awesome video
Glad you enjoyed it :)
This is so much better than After Effects! Not that After Effects is bad, its great, but this would take a lot longer in After Effects
Totally agree bro! I love After Effects too but its a heavy software to create simple things like lottie.
@@DesignXstream The only thing is that the program isn't free. Or am I wrong?
@@levindeheer2056 yes! It isn't free but it isn't as expensive as after effects either.
I've posted a new video on 2 more apps that can create lottie do check that out as well it includes a paid software and an open source free tool also.
Clicked the video again just to play adds and Type this Comment. Good Video. Cheers m8
Thank you! That means a lot :) Glad yu liked the video!
Wow
Glad you liked it!
Problem: Haiku Animator is getting all the images from Figma which aren't enabled as export.
Please help.
It is even more complex!! After effects is way more easier.
Check out our new video. Lottie using Aninix.
@@DesignXstream No.
How to install haiku??? It showing now that it is not available for windows.. what should I do??
Hey Devika, Haiku just went open-source recently. So they just have a Mac version right now. They will be launching Windows version soon.
Hey, I loved your animation, I m creating something similar but could you tell me how did you created that loading text?
Hey Rahul, I used Figma to create that text in vector format. You can use any vector tools like Figma, Illustrator etc. All you have to do is Type your text then use some script font you can find a lot of amazing script fonts on sites like dafont, etc then just trace it using the vector/pen tool and that is how you get the vector version of the text.
Also there is a way to do this kind of animation Adobe Xd you can check the video here: th-cam.com/video/_tlp4Gm--c4/w-d-xo.html
@@DesignXstream hey, thank you so much for quick reply!
It seems cool, b
ut there is a problem during the authentification between Figma and Haiku...a solution?
The only workaround I see is to export the Figma frame to SVG and then import it into Haiku!
How do we upload an Illustrator file to Haiku? (this video is awesome helped me a lot!!)
I have not tried with Illustrator but the process should be pretty similar where you open a new illustrator file and copy the contents into it or import it from a new file.
Hi!! Thank you for this video. I just downloaded the software but I'm unable to connect my figma account to the app. I read online that you need your own server. I don't really know much about computers so not sure how to go about that. Do you have any advice/do you have this issue?
You dont need to have any server.. I'm not sure what exactly was the error you encountered but you just need a Figma account and provide the file link and maybe authorize the access to it.
Just created my first lottie animation today , with AE after spent days learn how to operate it ... the Result full with limitation
Not support simple expression
Not support offset path
Trim path generated fill color even the shapes set to no fill
Drop shadow add additional height thus really messed up with shapes size
Gonna try Haiku !
I believe the limitations would remain the same on any platform because Lottie doesn't support all properties. This has the full list: lottiefiles.com/supported-features
How to download and install haiku animator on windows?
Haiku Animator doesn't connect with Figma - just errors. I exported SVG from Figma and brought into HA and it was a pain to work with sizing and scaling. Haiku Animator has a lot of issues including support pages with dead links. Maybe it's abandoned as the last version is Sept. 2021.
After it became open source I'm hearing a lot of issues. Back when I used it was great!
I've just got zip file file from git, and unable to install it, can you please make a video on the installation process
Hey I made this video the install file was available. But now they made it open source so it will take sometime for them to release the installer for windows. For mac it is already available.
Can you upload JPEG sequence from something like Blender?
I suppose that would work... but it beats the whole purpose of vector animation of lottie and the file size would be huge!
How to download and install haiku animator on windows?
Since it went open source there is no update on Windows installer! Instead you can try the new Figma plugin to create lottie: th-cam.com/video/R8w8FNabn38/w-d-xo.html
What about Adobe Character Animator? Any chance we will be able to create Lottie animations with it someday? What do you think?
Hey Martin, Unless Adobe introduces a feature of exporting vector animations in Character Animator there would be no way possible to do it. People have requested for this feature since a long time but I think there is no update on it yet.
Once Adobe allows to export vector animations then we can import that to After Effects and use bodymovin plugin to create lottie animations out of it.
Hope this answers your question :)
@@DesignXstream Thank you.
Just for the reference for future users, here are some links to the progress. Or lack thereof.
adobe-video.uservoice.com/forums/911317-character-animator/suggestions/34293934-ability-to-save-out-a-vector-animation-json-thir
Also some user called gpeal admitted on Apr 12, 2019 that "Unfortunately, the character animator is unlikely to be supported on Android in the near future, if ever".
github.com/airbnb/lottie-android/issues/1181
It seems there will be no such feature. If anyone has more info, let me know in the comment.
There is some initiative to make Adobe Animate CC work with Lottie (Bodymovin) though.
github.com/airbnb/lottie-web/issues/1604
Animate offers some advantages to After Effects, see the thread above.
@@Slazerable Cool! Those are some good references. Would be really helpful to other users.
And yeah seems like there is no such feature for vector export and have to wait for an update on this from Adobe.
Which os are you using?
using MacOS
can you help me by making a video on how to install haiku on windows? I am very confused with the way it is written on github
Sorry I don't have a Windows! And for Windows installation there are multiple Node JS dependencies that you have to install. As an alternative suggest you to try this new figma plugin to create Lottie: th-cam.com/video/R8w8FNabn38/w-d-xo.html
@@DesignXstream omg thank you so much, you helped me a lot! thats what i need! please keep making more awesome videos, love from indonesia!
@@febriaerlianahadi2850 Glad I could help! :) Do check our Instagram for cool design resources: instagram.com/DesignXstream
Can you do a video on importing AI files into haiku?
Are you facing any issue in importing from AI?
Sorry I didn't manage to install the software. Can you help me this ?
Haiku Animator is now open source so you will find the installers in GitHub. What issue are you facing?
@@DesignXstream I have found the github repo but I don't know how to build that for windows . Do you have the builded one, If yes upload and share me the drive link please.
@@gopinathp4953 they have recently made it open source so in current release there is only Mac version... They probably would release the installer for windows in their next release!
@@DesignXstream Ok thanks
i have a problem. Instead of get started button I am getting Download on GitHub button.. plz reply this comment. i can not use haiku animator for this problem
Hey Haiku has gone open source after I made this video! so currently there is only installer for Mac OS. For windows it is still in progress!
@@DesignXstream I am very sorry for that. What can be done now? Please suggest me what other editor is as easy as Haiku. finally tnx a lot for your reply.
@@mywebsite6524 You can try out Aninix check out this video: th-cam.com/video/R8w8FNabn38/w-d-xo.html
Can save file in tgs format on Lottie ?
I don't think it supports any other format than JSON!
@@DesignXstream Alright
Thanks
Where is it for windows?
Haiku became open source recently so they currently only have the installer for Mac.
@@DesignXstream oh ok... thanks
Is it offline or online platform?
It is a Native App that you have to download and install. Available for both Mac & Windows.
Hello! Please, make normal installer for windows! Thank You!
This app is great! But
Without windows installer this app just not exists...
Unfortunately this tool is now open source and there seems to be no updates on the windows installer. As an alternative you can try Aninix on Figma it is free! Check it on my recent videos!
Exported lottie but its blank!!!! any ideas why?
Hey Raphael, I've not faced this issue so far. However, can you check if the json you exported has any content or is it empty? That could be some issues with the export so try to re-import and export once again.
@@DesignXstream All sorted, but no svg only vectors but awesome! Nice one! 👍Thanks a lot!
Hi, i am also facing the same issue, any solutions?
Sadly, Haiku has been discontinued.
The source code is available, but work on it has ceased, and it hasn't been updated in over a year.
Yes Haiku was more smoother and powerful but unfortunately it is dead!
not able to export lottie with trial so far...
In the video I've been using the trail version itself and I was able to export without any issue. Are you getting any error?
@@DesignXstream I bring it into Lottie editor and see layers of all white. Nothing. It previews in the program, but the exports are failing. Am I missing code or something?
@@SUBMISSION20 Never faced this issue. There is a sample project available when you launch it can you try to export that and check. If that works then maybe you are doing something wrong in creating.
Haiku doesn't show me any text at all
I din't get you. Are you talking about the software after installation?
@@DesignXstream Yeah after installation, it's just a dark page with some buttons, does haiku has minimum video requirements?? I don't get it.
@@El_Bartto I think it should just have some basic requirements. If you are on mac then make sure it is macOS 10.9+
@@El_Bartto and initially it will be just a dark page with a + button to create new project.
This video is nothing but to show how to make lottie file
Yes! 👍🏼
There would appear to be no easy way to install on Windows, so it's pretty much useless.... Pity
Currently the best alternative is to use lottiefile plugin or Aninix on Figma. Check these 2 tutorials:
th-cam.com/video/R8w8FNabn38/w-d-xo.html
th-cam.com/video/9UbNxKVy3eE/w-d-xo.html
Calling it a-dob-ee feel like you are insulting the program. Same word two meanings in two different contexts. You are pronouncing it wrong.
Yes, I called it Ado-bEE. Is that wrong in anyway? 🤔