I am not a freelancer, but I see people not getting paid after they have submitted their work while working remotely. This is a common problem. can you please make a video to help other freelancers deal with this situation? It will also be a huge help for upcoming freelancers
His channel is a treasure trove of design-related content. We need not look elsewhere. He is so underrated; I sincerely hope more people discover his incredible work.
Loved the video and learnt so much! Here are my learnings from this video: Chapter 1: Introduction to Lottie Files Lottie files are a format for animations that can be used on the web and in mobile apps They are lightweight, scalable, and can be easily edited Lottie files can be created using the Lottie Creator tool, which is a web-based animation editor The tool allows users to create animations using a variety of shapes, icons, and graphics Animations can be customized using keyframes, motion co-pilot, and other features Chapter 2: Creating a Lottie Animation To create a Lottie animation, start by creating a new file in Lottie Creator Choose a shape or icon to use as the basis for your animation Use the move tool to position the shape on the canvas Use the shape tools to customize the shape and add additional elements Use keyframes to create animation by setting the position, scale, and rotation of the shape at different points in time Use motion co-pilot to create more complex animations using pre-made effects Use the trim path feature to create custom animations by trimming the path of a shape Chapter 3: Exporting a Lottie Animation To export a Lottie animation, go to the dashboard and select the animation you want to export Choose the format you want to export in (e.g. Lottie Json, optimized Lottie Json, MP4, etc.) Customize the export settings as needed (e.g. frame rate, resolution, etc.) Download the exported file and use it in your web or mobile app Lottie files can be used in a variety of contexts, including web development, app design, and more In Conclusion Lottie files are a powerful tool for creating animations for the web and mobile apps. With the Lottie Creator tool, users can create custom animations using a variety of shapes, icons, and graphics. By following the steps outlined in this video, users can create their own Lottie animations and export them for use in their projects.
Your hardwork and efforts makes us feel that there is someone who is trying hard to teach us the best possible way about Design and Stuff ❤ Thank u so much for your efforts ☺️
Nice video!! Here are my learnings from this video: Lottie Creator is a website that enables users to create animations having dot lottie format, having a smaller file size than conventionally used formats(like mp4). It has a user-friendly interface that is easier to learn. On right hand side is the property pane, which shows the properties that can be customized for each selection. The bottom part has a timeline, which also has a layer pane to the left. It allows us to add keyframes for various properties(like scale, position, opacity, etc.) The left part has a pane for uploading SVG files, creating AI vectors, accessing animations made by the community and motion copilot for AI animation. Files can be sorted in a better manner by creating nested scenes. Exporting the files made on Lottie creator is also quite easy. They can be exported in .gif or .mp4 format. The .lottie format is best suited for development purposes. Before exporting, we can preview the animation in various screen sizes and lottie app versions allowing for a better compatiability. We can create a shareable link to the lottie file. Thank you Ansh ji for this wonderful video.
Man! You are literally uploading the things which are sequentially in my to do list. Thanks for all your videos.They are really helpful and up to the point.
Canvas Canvas is the art board or the main screen where the assets are exported and animations are applied The asserts can be only vectors (svg files from tools like illustrator) or can be link format from Lottie files asserts library Discovering animation The discovering animation sections and the other sidebars gave me a look and feel of using Canva and Adobe Express which can be an obvious case of a UX design (Law of similarity) Properties panel The property panel is similar to Figma and Illustrator but one interesting thing about panel is the limited number of options which looks it minimal , the anchor point the key frame option for opacity (which is infact a necessity in animating apps). The total time frame can also be adjusted along with the frame per second The AI prompt to vector is similar to the approach of Firefly but USP - choosing type options are more whereas Adobe has content type . Lottie files strategy - simple animations using web asserts and no complexity and in addition they have incorporated AI (which is booming and in revolutionary phase). The motion copiolet seems to work well to align with our specified effect I have tried applying the smooth disappearing effect and we should also make sure to prompt really well with inclusion of keywords like “make”, “effect” , ‘//specified effect needed’ etc There are few other options to explore such as fast, complex and experimental , we can select the one thats opt for our animation The trim option after conversion of rectangle is so good that it can be used as a windmill light effect Thank you @AnshMehraa for this amazing tutorial 😄
01. Basics of Lottie Files Why Lottie files? The dotlottie format has a low file size compared to other formats and is easy to edit and share. - In the center, we have a canvas under which we control to play, forward, backwards, loop, and preview in the player. - The anchor point is like a center of gravity. We can manually change the anchor point of the element, or we have control in the right-side panel. - Appearance property, where we change the color of fill and stroke, click the kebab menu to select the property. - AI Prompt to generate vector animation. Instead of starting from scratch, we can use this (in the coming days, execution is going to be so easy). - Motion Copilot generates animation effects. Example prompt: "Make it shrink super fast and come back" (select the layer first and then apply the effect). - Animation Presets (three categories: in (how object appears), out (how object ends), highlight (in between), like pre-made effects). - Double-click the main scene to go to the subscene (in the subscene, you can edit elements individually). - Keyframes (click on the three dots to add position, scale, opacity, and rotation; the diamond icon is a keyframe-if we click that, it will add the keyframe to the timeline). - Note: Don’t add two keyframes too close to each other; it will create some kind of glitch in the animation. 02. Create - Select the main screen. You can see the timeline in the right-side panel edit (select the main screen first to change the timeline). - Use Motion Copilot to generate effects (we can also make changes to the effect based on our needs). - Parent and child layer concepts are here as well. - Click edit path, then trim path (remove the path one by one), trim start (moves from the starting point of the vertex), trim end (moves from the endpoint). - Upload your design in SVG format, create animation using these present effects, add keyframes, and use AI to generate animation and effects. 03. Export - Handoff embed (we have embedded HTML code, Webflow and Framer integration, iOS, and more options). - Add mockup (see a preview of how it looks on mobile, website). - Note: Organize files clearly. - Note: Before export, if you have more than one element in the main scene, select all the elements, right-click, create scene, then go to the dashboard and export. - Click the download icon (download options: Lottie JSON, dotlottie, mp4, gif, webm, mov). Thanks🙏 @Ansh for playing an important role in both my professional and personal life. Thank you so much for all the insights you share with us. Thanks, Poornima
here are my learnings: first chapter->explains what LottieFiles are and how they differ from other animation formats, such as gifs, pngs, and mp4s. LottieFiles are a lightweight JSON-based format that is specifically designed for animations in web and mobile apps. They are smaller in file size and easier to integrate into apps than other animation formats. second chapter ->how to create a Lottie animation from scratch using LottieFiles.demonstrates how to create basic animations using shapes and keyframes. third chapter->explains how to export a Lottie animation for use in a website or app. LottieFiles can be exported in a variety of formats, including Lottie JSON, optimized Lottie JSON, MP4, WebM, and GIF. thankyou ansh for this opportunity and for this video!!!
Hi Ansh, My Mother tongue is Bengali, I recently watched your video on Lottie Creator and was absolutely blown away by its capabilities! Discovering a free web app for animations was a game-changer for me. It's amazing how easily I can modify colors and positions in AI-generated images and bring them to life with animations. However, I've hit a roadblock.I trouble to Export my Lottie Animation in MP4 So I share you a Video as your hometask,and I'm trying to create a walking animation for an AI-generated image of a mother and daughter using Motion Copilot, but despite my best efforts, I just can't get it right. I've tried multiple prompts and methods without success. I would greatly appreciate any detailed guidance you can provide. Your help would not only resolve my current issue but also enable me to animate classic Bengali literature stories, a project I'm passionate about. Thank you so much for your incredible work and support! Best regards, Dip Shannigrahi
So here is what I learn from this video 1) Lottie files- an amazing tool for creating motion graphics in few steps without any unnecessary efforts. We can use this in any laptop. Lotti files is beginner friendly, and we don't need to download it. 2) Interface- In the center we have a blank canvas where we will create amazing animations. In the bottom we have playe control where we can go to start or end of our animation. on the right we have fps setting where we can edit our animation timing as we want and a panel for setting the position of the anchor point of the element 3) What Lottie files gives us- . Premium animations, . Bunch of free animations, . AI prompt to vectors, . MOTION CO-PILOT, Motion Co-pilot- We can animate small things their my just writing our requirement and hit enter If you are okay with it. 4)At the bottom we have keyframes any by double clicking on it will take us to subscenes. In the sub scene we can individually edit any of our elements from the canvas like color etc. In the key frame we just fixed the exact location and size. Make sure that you don't add two key frames too close as this will show some glitch in the animation. Parent and child concept-In the subscene we have parent and child layer. Any changes in the parent layer will also affect the child but any modification in the child will not affect the parent. on the right panel we have animation style, shape edit option Exporting the file We can export our files in different format like in mp4, GIF , dot.lottie. There are options for developers too to help them with the code. Thank You for reading. This is Ananya Singh signing out😀 Big thanks to @Ansh Mehra
what a coincidence, I just got rejected on an interview because of lottie conversion from After Effects and now I come across this, Thank you so much Ansh Waiting for your views on Rive, I think it will do better than Lottie in the near future.
My Takeaway from the Video 🌟 Lottie Files: Where Magic Meets Motion 🌟 - Simplified Animation Creation: LottieFiles-your animation wizard! No coding needed. Intuitive interface, AI Promptu Vector, and Motion Co-Pilot make motion graphics a breeze. 🚀 - Canvas of Creation: Our blank canvas awaits-a universe where animations bloom. Play controls guide us through time’s tapestry. And behold, the FPS setting-an hourglass to bend animation’s flow. Anchors set, we’re ready to weave. 🎨⏳ - Lottie’s Gifts: 🌟 Premium Animations: Gems from distant realms. 🎁 Free Treasures: A trove for curious souls. 🧙♂ AI Promptu Vector: Whispered secrets, drawn into existence. ⚙ Motion Co-Pilot: Speak desires, watch pixels dance! 🌠 - Keyframes: Cosmic Choreography: Below, keyframes-tiny portals. Double-click, and we slip into subscenes. Here, colors swirl, shapes morph. But beware! Too-close keyframes ripple reality. Balance, my friend, balance! ⏳🌌 - Teamwork and Compatibility: Collaboration tools unite teams. Export in Lottie Json or MP4. Optimize for performance. eamless integration into websites and apps. 👥📊 - Premium animations, AI-prompted vectors, and Motion Co-Pilot-our trusty spellbook. Type desires, watch magic unfold! 🌠 - Finale: Export as mp4, GIF, or dot.lottie. formats for Developers? They wield code spells. 📜🌏 May your pixels dance forever and let your creativity unleash in Designing! 🌠🎨
lottie files allow us to create basic animations using anchor points. We can generate illustrations using AI prompts and also use Motion Copilot to automatically animate them. Each object in the animation can have parent and child relationships, so any modifications made to the parent will automatically affect the child and its animations. Additionally, the timepaths feature allows us to edit and trim the path, moving elements of an object one by one, creating visually appealing animations. And man you are crazy..
Hi Ansh👋, Thank you so much for giving this intro to Lottie files. I being from the Animation industry, used after effects for all the solutions. But through this video I learnt that Lottie files is a much quicker and at the same time most effective way to incorporate your animation across mediums in a smoother way. I too would love to give it a go and try completing the bouncing ball animation, to learn and grow from this.😃 Regards Pujita Alreja
hello sir how to uiux figma in online internship for student. i am creat a mobile app design web design or basic design of logo . i am become a freelancer in future please some information what to do. if u have
Try Lottie for No-Code Animations: lottiefiles.com/lottie-creator?
Join our Broadcast Community
ig.me/j/AbYz7q54oZ3CBSHs/
👉🏻 Learn UX (Product Design) for free:
learnuiux.in/
👉🏻 Free AI Courses for Beginners (ChatGPT, Midjourney + Resources)
→ www.howtoprompt.in/
I am not a freelancer, but I see people not getting paid after they have submitted their work while working remotely. This is a common problem. can you please make a video to help other freelancers deal with this situation?
It will also be a huge help for upcoming freelancers
His channel is a treasure trove of design-related content. We need not look elsewhere. He is so underrated; I sincerely hope more people discover his incredible work.
Thank you! 🙏🏼
true
Loved the video and learnt so much! Here are my learnings from this video:
Chapter 1: Introduction to Lottie Files
Lottie files are a format for animations that can be used on the web and in mobile apps
They are lightweight, scalable, and can be easily edited
Lottie files can be created using the Lottie Creator tool, which is a web-based animation editor
The tool allows users to create animations using a variety of shapes, icons, and graphics
Animations can be customized using keyframes, motion co-pilot, and other features
Chapter 2: Creating a Lottie Animation
To create a Lottie animation, start by creating a new file in Lottie Creator
Choose a shape or icon to use as the basis for your animation
Use the move tool to position the shape on the canvas
Use the shape tools to customize the shape and add additional elements
Use keyframes to create animation by setting the position, scale, and rotation of the shape at different points in time
Use motion co-pilot to create more complex animations using pre-made effects
Use the trim path feature to create custom animations by trimming the path of a shape
Chapter 3: Exporting a Lottie Animation
To export a Lottie animation, go to the dashboard and select the animation you want to export
Choose the format you want to export in (e.g. Lottie Json, optimized Lottie Json, MP4, etc.)
Customize the export settings as needed (e.g. frame rate, resolution, etc.)
Download the exported file and use it in your web or mobile app
Lottie files can be used in a variety of contexts, including web development, app design, and more
In Conclusion
Lottie files are a powerful tool for creating animations for the web and mobile apps. With the Lottie Creator tool, users can create custom animations using a variety of shapes, icons, and graphics. By following the steps outlined in this video, users can create their own Lottie animations and export them for use in their projects.
Your hardwork and efforts makes us feel that there is someone who is trying hard to teach us the best possible way about Design and Stuff ❤ Thank u so much for your efforts ☺️
Absolutely! Keep learning and working hard!
Nice video!! Here are my learnings from this video:
Lottie Creator is a website that enables users to create animations having dot lottie format, having a smaller file size than conventionally used formats(like mp4). It has a user-friendly interface that is easier to learn.
On right hand side is the property pane, which shows the properties that can be customized for each selection.
The bottom part has a timeline, which also has a layer pane to the left. It allows us to add keyframes for various properties(like scale, position, opacity, etc.)
The left part has a pane for uploading SVG files, creating AI vectors, accessing animations made by the community and motion copilot for AI animation.
Files can be sorted in a better manner by creating nested scenes.
Exporting the files made on Lottie creator is also quite easy. They can be exported in .gif or .mp4 format. The .lottie format is best suited for development purposes. Before exporting, we can preview the animation in various screen sizes and lottie app versions allowing for a better compatiability. We can create a shareable link to the lottie file.
Thank you Ansh ji for this wonderful video.
Man! You are literally uploading the things which are sequentially in my to do list. Thanks for all your videos.They are really helpful and up to the point.
Canvas
Canvas is the art board or the main screen where the assets are exported and animations are applied
The asserts can be only vectors (svg files from tools like illustrator) or can be link format from Lottie files asserts library
Discovering animation
The discovering animation sections and the other sidebars gave me a look and feel of using Canva and Adobe Express which can be an obvious case of a UX design (Law of similarity)
Properties panel
The property panel is similar to Figma and Illustrator but one interesting thing about panel is the limited number of options which looks it minimal , the anchor point the key frame option for opacity (which is infact a necessity in animating apps).
The total time frame can also be adjusted along with the frame per second
The AI prompt to vector is similar to the approach of Firefly but
USP - choosing type options are more whereas Adobe has content type .
Lottie files strategy - simple animations using web asserts and no complexity and in addition they have incorporated AI (which is booming and in revolutionary phase). The motion copiolet seems to work well to align with our specified effect
I have tried applying the smooth disappearing effect and we should also make sure to prompt really well with inclusion of keywords like “make”, “effect” , ‘//specified effect needed’ etc
There are few other options to explore such as fast, complex and experimental , we can select the one thats opt for our animation
The trim option after conversion of rectangle is so good that it can be used as a windmill light effect
Thank you @AnshMehraa for this amazing tutorial 😄
01. Basics of Lottie Files
Why Lottie files? The dotlottie format has a low file size compared to other formats and is easy to edit and share.
- In the center, we have a canvas under which we control to play, forward, backwards, loop, and preview in the player.
- The anchor point is like a center of gravity. We can manually change the anchor point of the element, or we have control in the right-side panel.
- Appearance property, where we change the color of fill and stroke, click the kebab menu to select the property.
- AI Prompt to generate vector animation. Instead of starting from scratch, we can use this (in the coming days, execution is going to be so easy).
- Motion Copilot generates animation effects. Example prompt: "Make it shrink super fast and come back" (select the layer first and then apply the effect).
- Animation Presets (three categories: in (how object appears), out (how object ends), highlight (in between), like pre-made effects).
- Double-click the main scene to go to the subscene (in the subscene, you can edit elements individually).
- Keyframes (click on the three dots to add position, scale, opacity, and rotation; the diamond icon is a keyframe-if we click that, it will add the keyframe to the timeline).
- Note: Don’t add two keyframes too close to each other; it will create some kind of glitch in the animation.
02. Create
- Select the main screen. You can see the timeline in the right-side panel edit (select the main screen first to change the timeline).
- Use Motion Copilot to generate effects (we can also make changes to the effect based on our needs).
- Parent and child layer concepts are here as well.
- Click edit path, then trim path (remove the path one by one), trim start (moves from the starting point of the vertex), trim end (moves from the endpoint).
- Upload your design in SVG format, create animation using these present effects, add keyframes, and use AI to generate animation and effects.
03. Export
- Handoff embed (we have embedded HTML code, Webflow and Framer integration, iOS, and more options).
- Add mockup (see a preview of how it looks on mobile, website).
- Note: Organize files clearly.
- Note: Before export, if you have more than one element in the main scene, select all the elements, right-click, create scene, then go to the dashboard and export.
- Click the download icon (download options: Lottie JSON, dotlottie, mp4, gif, webm, mov).
Thanks🙏 @Ansh for playing an important role in both my professional and personal life. Thank you so much for all the insights you share with us.
Thanks,
Poornima
here are my learnings:
first chapter->explains what LottieFiles are and how they differ from other animation formats, such as gifs, pngs, and mp4s. LottieFiles are a lightweight JSON-based format that is specifically designed for animations in web and mobile apps. They are smaller in file size and easier to integrate into apps than other animation formats.
second chapter ->how to create a Lottie animation from scratch using LottieFiles.demonstrates how to create basic animations using shapes and keyframes.
third chapter->explains how to export a Lottie animation for use in a website or app. LottieFiles can be exported in a variety of formats, including Lottie JSON, optimized Lottie JSON, MP4, WebM, and GIF.
thankyou ansh for this opportunity and for this video!!!
Hi Ansh,
My Mother tongue is Bengali,
I recently watched your video on Lottie Creator and was absolutely blown away by its capabilities! Discovering a free web app for animations was a game-changer for me. It's amazing how easily I can modify colors and positions in AI-generated images and bring them to life with animations.
However, I've hit a roadblock.I trouble to Export my Lottie Animation in MP4 So I share you a Video as your hometask,and I'm trying to create a walking animation for an AI-generated image of a mother and daughter using Motion Copilot, but despite my best efforts, I just can't get it right. I've tried multiple prompts and methods without success.
I would greatly appreciate any detailed guidance you can provide. Your help would not only resolve my current issue but also enable me to animate classic Bengali literature stories, a project I'm passionate about.
Thank you so much for your incredible work and support!
Best regards,
Dip Shannigrahi
So here is what I learn from this video
1) Lottie files- an amazing tool for creating motion graphics in few
steps without any unnecessary efforts. We can use this in any
laptop. Lotti files is beginner friendly, and we don't need to download it.
2) Interface- In the center we have a blank canvas where we will
create amazing animations. In the bottom we have playe control where we can
go to start or end of our animation.
on the right we have fps setting where we can edit our animation timing as we
want and a panel for setting the position of the anchor point of the element
3) What Lottie files gives us-
. Premium animations, . Bunch of free animations, . AI prompt to vectors,
. MOTION CO-PILOT,
Motion Co-pilot- We can animate small things their my just writing
our requirement and hit enter If you are okay with it.
4)At the bottom we have keyframes any by double clicking on it
will take us to subscenes. In the sub scene we can individually edit any of our
elements from the canvas like color etc.
In the key frame we just fixed the exact location and size. Make sure
that you don't add two key frames too close as this will show some
glitch in the animation.
Parent and child concept-In the subscene we have parent and child layer.
Any changes in the parent layer will also affect the child but any modification in
the child will not affect the parent.
on the right panel we have animation style, shape edit option
Exporting the file
We can export our files in different format like in mp4, GIF , dot.lottie.
There are options for developers too to help them with the code.
Thank You for reading.
This is Ananya Singh signing out😀
Big thanks to @Ansh Mehra
Thankz ansh getting more values to us 🎉
Thank you! 3D animations are soo important to learn now
what a coincidence, I just got rejected on an interview because of lottie conversion from After Effects and now I come across this, Thank you so much Ansh
Waiting for your views on Rive, I think it will do better than Lottie in the near future.
I didn't understand what happened?
My Takeaway from the Video
🌟 Lottie Files: Where Magic Meets Motion 🌟
- Simplified Animation Creation: LottieFiles-your animation wizard! No coding needed. Intuitive interface, AI Promptu Vector, and Motion Co-Pilot make motion graphics a breeze. 🚀
- Canvas of Creation: Our blank canvas awaits-a universe where animations bloom. Play controls guide us through time’s tapestry. And behold, the FPS setting-an hourglass to bend animation’s flow. Anchors set, we’re ready to weave. 🎨⏳
- Lottie’s Gifts:
🌟 Premium Animations: Gems from distant realms.
🎁 Free Treasures: A trove for curious souls.
🧙♂ AI Promptu Vector: Whispered secrets, drawn into existence.
⚙ Motion Co-Pilot: Speak desires, watch pixels dance! 🌠
- Keyframes: Cosmic Choreography:
Below, keyframes-tiny portals. Double-click, and we slip into subscenes. Here, colors swirl, shapes morph. But beware! Too-close keyframes ripple reality. Balance, my friend, balance! ⏳🌌
- Teamwork and Compatibility: Collaboration tools unite teams. Export in Lottie Json or MP4. Optimize for performance. eamless integration into websites and apps. 👥📊
- Premium animations, AI-prompted vectors, and Motion Co-Pilot-our trusty spellbook. Type desires, watch magic unfold! 🌠
- Finale: Export as mp4, GIF, or dot.lottie. formats for Developers? They wield code spells. 📜🌏
May your pixels dance forever and let your creativity unleash in Designing! 🌠🎨
lottie files allow us to create basic animations using anchor points. We can generate illustrations using AI prompts and also use Motion Copilot to automatically animate them. Each object in the animation can have parent and child relationships, so any modifications made to the parent will automatically affect the child and its animations.
Additionally, the timepaths feature allows us to edit and trim the path, moving elements of an object one by one, creating visually appealing animations.
And man you are crazy..
Hi Ansh👋, Thank you so much for giving this intro to Lottie files. I being from the Animation industry, used after effects for all the solutions. But through this video I learnt that Lottie files is a much quicker and at the same time most effective way to incorporate your animation across mediums in a smoother way.
I too would love to give it a go and try completing the bouncing ball animation, to learn and grow from this.😃
Regards
Pujita Alreja
It's certainly a Miracle 🌟
Luv Lottie files! ❤🎉👏🏻
Thank you so much!! This is exactly what I was looking for :)
ansh, you are a lifesaver! ❤
Thanks man for all your hard work ❤
Thank you man!
Thank you so much ansh...
Very helpful content❤
Waiting for part 2 ❤
Thanks ansh bhaiya getting more values to us
Please make video on how can we export my figma prototype animations. How can we provide gif or video to developer of my figma component animations😊
Thankyou brother, you are super cool
Hahah thank youu
Can we use this for the fashion industry to animate our avatars and designs more easily and faster.
please make a video on the impact of Figma AI in the future.
Update on editing course? When is ep 2 releasing ?
It’s almost ready! Coming soon ⚡️
Please make illustrator tutorials
next one on spline please
What about video editing 5 lectures? Where have they gone?
Coming super soon!
@@AnshMehraa awesome waiting for them 🤜🤛
He is real 💎
Hi ansh when will you start Hindi channel
hello sir how to uiux figma in online internship for student. i am creat a mobile app design web design or basic design of logo .
i am become a freelancer in future please some information what to do. if u have
ruclips.net/video/zODJUy1c7TQ/видео.html
❣
App bade pyaare ho
Shukriya
I'm not video editor but I'll give my best 🎉
Try it!