Add AMAZING Animations with LottieFiles - SO EASY
ฝัง
- เผยแพร่เมื่อ 6 ม.ค. 2021
- framer.com/designcourse -- Sign up to Framer for free or get 20% off any paid plan!
-- Want to learn UI/UX? designcourse.com
-- Today, we're going to step into the world of animation and interaction design by taking a look at a great resource called LottieFiles. LottieFiles is a website/marketplace where you can grab Lottie-based animations and integrate them into your projects. Some of these resources are free, and some are paid -- although, they're all quite cheap. It's a great way to add high level animations / interactions to your projects without having to create them from scratch. I'm going to show you exactly how to integrate one such Lottie file to a web based project.
Codepen demo for this project:
codepen.io/designcourse/pen/Q...
My other Lottie video tutorials:
th-cam.com/users/DesignCours...
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: 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 Designcourse.com.
Come to my discord server or add me on social media and say Hi! - แนวปฏิบัติและการใช้ชีวิต
Who else here uses Lottie for UI animations?
🖖
✋
🤙 since 2017 in react native
th-cam.com/video/mtZb7kuj_BM/w-d-xo.html
we definitely do!
I am new to front end web development and i have to say, you are ONE OF THE BEST channels anyone can EVER find on youtube for UI/UX design tips and tutorials. Love the tutorial dude! You really helped me.
This was really inspiring! Can add animation with such a simple way, love it!
Keep the awesomeness coming brother, thanks for sharing!
Wow! this was great, thanks Garry, and I will use one in my to be updated portfolio design. Thanks again!
Thank you for the amazing staff 😍
Thank you! Very helpful. I can’t wait to use it in my project now!
Finally ...was expecting a tut about lottie from you
Another great video. Will be checking out the lottie files today 🤗
Thank you!! This is interesting... should try this!
Sir, your explanation is awesome and your voice is sweet as well. ❤
Love these animations! Thanks.
Wow... I'm going to try this later!!!
Waited for your video ❤️
Can't wait to learn this
loved the video thanks.. Im gonna use that and some in my portfolio. Cheers and Happy New Year 2021
I used lottie so much in recent years! Never heard of this site before. Such a good resource to know. Thank you!
Do you have any other recommendations?
This is outstanding!
Very nicely done! Thank you
Like all your videos. Thanks a million.
Thanks for this great tutorial 👍
super USEFUL !!!!
TNX for your content
Lottie files are cool, I have used it almost in my every project
Can you help me to do this animation. I can send my files today. Can you give whatsapp number or email for help
This was amazing. Don't know why, but for some reason I would just keep my distance from Lottie coz I just couldn't wonder or even bother with its working. This video has got me interested in Lottie. And I wonder how I can implement After Effects in creating my own animations. Noticed you have a video from 2017 about After Effects. Will have a look at that.
Thanks a lot Gary! 👍🏻
Awesome stuff!!! 😉💙💙
Thank you, very useful
I never clicked so fast in my entire life.
I'm a developer and I've just randomly discovered LottieFiles today. It's very cool indeed. And your awesome tutorial has just shown me how to use it in my projects. Thanks a lot. Were you able to do a tutorial on how to work with the "Transitions"?
Next good video from you! GREAT AGAIN!
love the hair difference between the course and the Framer add
life saver!
love animations
Lottie is cool animation!
awesome tutorial. A page transition tutorial please.
thanks for breaking that down. so much work just to drop an svg into a page
like the ending of the video
Very cool
0:03 this reminds me of ms teams. Whenever I submit an assignment this type of animation pops up
i didnt know that, never submitted an assignment
@@eyyo3571 savage
dope outro XD
Not first but great hair man, you look good!
😅 I'm growing it out long. I don't know if I can do it though, it's going to get wild.
Great video! Page transition with Lottie please! 🙏
If you are a full dev expert, great!
This is very useful thanks. Where did you get the documentation for all the methods you use on the animItem? I am looking to find as much documentation as possible but for lottie it all seems to be scattered everywhere which is confusing.
can you do some logo redesigns of popular open source software such as Linux, Gimp and Gnome? They are used buy a lot of people but the logos look not modern. Or maybe do a logo review or reaction and share your thought.
What was that outro LMAO thanks
was there yet a video about the page transition? :D
please make a Lottie page transition I want that video pls
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?
Neat!!!
can i ad this to after effects?
I'm starting to try to learn and see if I have what it takes to be a front end web developer at first. I am with the FCC curriculum and my idea is this 2021 to form solid bases in html and css, to carry out several projects and my portfolio. My query is for those who have studied in a self-taught way, who consider better or gave better results for you, take notes with pencil and paper or use something like evernote, notion, etc and do it directly on the pc?
Hey, keen to hear if you've continued on your journey to be a front-end dev. As a self-taught dev myself, I find writing notes on paper to be slower but I remember more, whereas with Notion I can write more but it doesn't stick. So trade-offs either way. It's best to use both depending on how important the info is
WOW😍😍
Is it possible to replace the "Submit button" of (Elementor Forms) with Lottie Animations ?
I have the same confusion
Good afternoon, can you tell me how to add an array of several JSON files to path (in loadAnimation)?
This looks cool! I wonder if it will animate in Outlook’s inbox...I do html5 eCards and this may be an option?
Would as a GIF, but JavaScript won’t run in a HTML email
@@IAmAdamTaylor thanks Adam!
Which background music
how would one trigger to play a Lottie file with let's say 1 sec delay upon calling a popup, so eg I have a link to opening hours that calls a popup that plays the Lottie automatically once, stays stopped at 100% and gets reset when the popup is closed, so it can get triggered again? 😅
Am finding it hard to use it with django framework
Can I use my own after effects animations like this?
Yes, actually. I use my own animations.
Can anyone help how can i integrate this with my email signature
Hey there! Is there someone by any chance that can help a fellow developer out?
I'm facing an issue with a Lottie in a Wordpress site built with Elementor.
I need it to be triggered by viewport, but played only ONCE.
It triggers it every time that viewport comes into frame, is there any way to solve this? HELP!
Haha, i saw one of mine created confetti, with the name " Syed Asim Ali Shah"
How are your pythons, hamsters, dogs , and what not ...
there is also a website for preloaders. Preloaders.net.
Kabhi kabhi ap shopper double kerwany lag jaty hain sir g. although it's a great video
Happy Ethiopian Christmas
Great it makes sites so bloated lol
First !
Teacher :-What are the rare things in world........
.
.
.
.
.
.
.
.
Me - getting a like by gary
How can we use these animation to Shopify store please please please please reply please
Uhm
First
there is no reason to not use "cupcake ipsum" 🤣
NOPE, just NOPE
I was here to learn lottie but you seem too much confused
Wow! this was great, thanks Garry, and I will use one in my to be updated portfolio design. Thanks again!