- Видео 10
- Просмотров 39 543
Massive Educator
Индия
Добавлен 14 фев 2022
Learning, Trying and if it's good enough, Sharing with you all.
Milestone
1st : 15 Feb, 2022
100 : 28 Sep, 2022
500 : Progress
1k : Progress
Milestone
1st : 15 Feb, 2022
100 : 28 Sep, 2022
500 : Progress
1k : Progress
Custom Animated Sidebar/Drawer with animated icons - Flutter & Rive - Part III
🎬 Part I: ruclips.net/video/vmdafWtYzBg/видео.html
🎬 Part II: ruclips.net/video/a7_CSrT8CYI/видео.html
🔗 Source code:- github.com/Aashu-Dubey/flutter-samples/tree/main/lib/samples/ui/rive_app
🌐 Web demo: aashu-dubey.github.io/flutter-samples/#/course-rive
References:
🌻 Inspiration: designcode.io/swiftui-rive-animated-app
🎬 RepaintBoundary - Fun with Flutter (31:05) - ruclips.net/video/Nuni5VQXARo/видео.html
📦 Configurations and packages used:
Flutter: 3.3.10
rive: 0.10.1
📚 Chapters
- (00:00) Intro
- (00:23) Inspiration
- (00:43) Creating Side Menu
- (13:34) Integrating Side Menu with Home
- (15:50) Applying animations with Side Menu
- (23:13) Integrating OnBoarding with Home
- (30:39) Wrapping up
- (31:52)...
🎬 Part II: ruclips.net/video/a7_CSrT8CYI/видео.html
🔗 Source code:- github.com/Aashu-Dubey/flutter-samples/tree/main/lib/samples/ui/rive_app
🌐 Web demo: aashu-dubey.github.io/flutter-samples/#/course-rive
References:
🌻 Inspiration: designcode.io/swiftui-rive-animated-app
🎬 RepaintBoundary - Fun with Flutter (31:05) - ruclips.net/video/Nuni5VQXARo/видео.html
📦 Configurations and packages used:
Flutter: 3.3.10
rive: 0.10.1
📚 Chapters
- (00:00) Intro
- (00:23) Inspiration
- (00:43) Creating Side Menu
- (13:34) Integrating Side Menu with Home
- (15:50) Applying animations with Side Menu
- (23:13) Integrating OnBoarding with Home
- (30:39) Wrapping up
- (31:52)...
Просмотров: 6 146
Видео
Custom Bottom Navigation Bar with animated icons - Flutter & Rive - Part II
Просмотров 11 тыс.Год назад
🎬 Part I: ruclips.net/video/vmdafWtYzBg/видео.html 🎬 Part III: ruclips.net/video/LHbzddzD1W4/видео.html 🔗 Source code:- github.com/Aashu-Dubey/flutter-samples/tree/main/lib/samples/ui/rive_app 🌐 Web demo: aashu-dubey.github.io/flutter-samples/#/course-rive 🌻 Inspiration: designcode.io/swiftui-rive-animated-app 📦 Configurations and packages used: Flutter: 3.3.10 rive: 0.10.1 📚 Chapters - (00:00)...
OnBoarding & Login Modal UI - Flutter & Rive - Part I
Просмотров 2,8 тыс.Год назад
🎬 Part II: ruclips.net/video/a7_CSrT8CYI/видео.html 🎬 Part III: ruclips.net/video/LHbzddzD1W4/видео.html 🔗 Source code:- github.com/Aashu-Dubey/flutter-samples/tree/main/lib/samples/ui/rive_app 🌐 Web demo: aashu-dubey.github.io/flutter-samples/#/course-rive 🌻 Inspiration: designcode.io/swiftui-rive-animated-app 🔗 References as mentioned in the video: 1. Initial Setup (00:01:12 - 00:02:28): i. a...
Cards Gesture Rotation Animation in React Native (Reanimated & gesture handler)
Просмотров 2 тыс.2 года назад
🔗 Source code:- github.com/Aashu-Dubey/youtube/blob/0543549531d7668f533fc749cd9ee155ebc3f74b/rn_youtube/src/colorSwatch/ColorSwatch.tsx 🔗 Original Repo: github.com/Aashu-Dubey/react-native-animation-samples (original repository with more complete and advance implementation for this demo) 🐦 Inspiration: philipcdavis/status/1544703548423778311 ℹ️ Description: In this video we will imp...
Creating Vertical Animated Toolbar in React Native (Reanimated)
Просмотров 1,9 тыс.2 года назад
🔗 Source code:- github.com/Aashu-Dubey/youtube/tree/9098bccf42a2ce594044eb74f9315d6f9539f681/rn_youtube/src/animatedToolbar 🔗 Original Repo: github.com/Aashu-Dubey/react-native-animation-samples (original repository with more complete and advance implementation for this demo) 🐦 Inspiration: jmtrivedi/status/1517561485622321152 ℹ️ Description: In this video we will implement an inter...
Highlight any object in your video using Blender video editing | Blender 3.1
Просмотров 1,2 тыс.2 года назад
In this video we will learn how to Highlight a Clip or any Text in a video using Blender 3.1. You will usually highlight some object in your video if you want your audience to have special focus on that or when it's the central topic at a certain timeframe, and we'll also highlight Text, Text in a video can be useful in certain situation when audio can't be of much help, or to make text appear ...
How to create project specific local plugin | Ionic | Capacitor
Просмотров 4,9 тыс.2 года назад
Source code:- github.com/Aashu-Dubey/youtube/tree/ionic/local_plugin Capacitor Documentation:- capacitorjs.com/docs ℹ️ Description: We will get Status Bar height through native platform code and learn how to communicate between Ionic JavaScript and native code to build a custom Capacitor plugin that is local to your app. 🌟Chapters🌟 - (00:00) Intro - (00:14) Android Native Implementation - (03:0...
How to implement Side Menu Hamburger Icon Animation | Ionic | HTML, CSS
Просмотров 2,3 тыс.2 года назад
🔗 Resources: Drawer animation (previous video - 00:10): ruclips.net/video/TH75SYPs5Lo/видео.html Source code: github.com/Aashu-Dubey/Ionic-UI-Templates free menu animation samples: freefrontend.com/css-hamburger-menu-icons/ Animation code we have used: codepen.io/carlosriera/pen/qNgrEo 🌟Chapters🌟 - (00:00) Intro about task - (00:27) Understanding the code - (01:26) Let's get started - (02:40) A...
How to implement Side Menu Animation in Ionic | HTML, CSS
Просмотров 3,2 тыс.2 года назад
Source code: github.com/Aashu-Dubey/Ionic-UI-Templates Menu icon transition animation (next video - 22:51): ruclips.net/video/9ssPXzVecas/видео.html Description:- How to implement Drawer animation in Ionic 6 & Angular. Drawers are important part of the UI on mobile applications, where we usually show essential screens, some user detail or app's quick actions in one place. So to make drawer inte...
How to Implement List Animation in Ionic | HTML, CSS
Просмотров 3,6 тыс.2 года назад
🔗 Resources: Source code: github.com/Aashu-Dubey/Ionic-UI-Templates Article: medium.com/@aashu_dubey/list-animation-in-ionic-6-angular-c01930fbf527 Gist: gist.github.com/Aashu-Dubey/7b652abfe4a03c7d52c782386f744663 Easing (09:47):- developer.mozilla.org/en-US/docs/Web/CSS/easing-function 🎥 Other Videos Drawer animation (17:22): ruclips.net/video/TH75SYPs5Lo/видео.html Playlist: ruclips.net/p/PL...
Very helpful thanks!
to anyone who might face this error ||| Error: "AppUsageStats" plugin is not implemented on android ||| like me, for capacitor 4 and after the registerPlugin line needs to be before the super.onCreate call public class MainActivity extends BridgeActivity { @Override protected void onCreate(Bundle savedInstanceState) { registerPlugin(AppUsageStats.class); super.onCreate(savedInstanceState); } }
straight to the point, thanks
thank you!. it's really helped me
thank you <3 , it worked !
amazing work😍
Awesome explanation.
Sir please create tutorial for you rope view svg using svg
please send me file riv
Amazing!
Thank's Pro!
Thank you!
very good tutorial thanks! can you make a video on how to create a plugin that will handle notifications in addition to capacitor's notification plugin without interfering? thanks
Love these videos please do more animation reanimated videos
how do I update the rive icon upon clicks on the sidemenu - like changing pages on click?
Brother please please please teach me react native animation yours aee super smooth and feel really native also tell us how to add native code in it as well and yeah please be consistent with your videos your videos help a lot . Your templates make a video tutorial on them please
Hi, I'll try to be consistent, I have couple of videos in line so stay tuned in either of my channels. Regarding templates, I currently don't have plans for tutorials on them, maybe in the future, but most of their source code is open source. Currently I have some content related to animations which I'll be share in coming days or weeks, to stay updated for the next stuff you can follow me on twitter/X.
Flutter Rive code How can I add text under submenu icons?
For a Bottom Tab with label below the icons, you have to do some minor UI changes, like wrapping the Rive Widget with a Column and then adding the Text widget as a second item.
I understand, but how can I change the icons in a simple way?
Hi how are you TabItem(stateMachine: "SEARCH_Interactivity", artboard: "SEARCH"), How can I add text under the icons?
Hi, are you asking for SideMenu or the Bottom TabBar? To add Text below you just need minor UI changes using Column and adding the Text widget as a second entry.
I want to write text under the icons of the fixed menu at the bottom and how can I change the icons?@@massive.educator
icons are not loading
Hi, sorry for late reply, but is your issue fixed now? if not which version are using?
Great content, Is there are anyway to customize the capacitor's Official Plugin?
Thank you!
Thank you !
This is grate videos with animated with using react native . So Please create a more videos with scratch with create a responsive ui with mobile and table mode both.
Plz make more Animation with Flutter
Thank you!
Use Hindi
Hi, there's also a Hindi version: ruclips.net/video/cu49qg2E6eo/видео.html
Can you make it in react native you explain in a very great way 🔥🔥🔥🔥
Thank you! While there are gonna be more react-native content on this channel, I created this project in Flutter and Ionic only, so I can create tutorials for them, and currently don't have any plans to do the same in react-native. But if you're looking for a react-native version of this project, it is already created by someone else, and it is open source twitter.com/lima_lucas3/status/1531100140769103873
This amzing really awsm make more react native videos please .. ...... kindly please reply
you explaining in great way.. thank you for this video.
Credit: This app is inspired from the original free SwiftUI + Rive course by @DesignCodeTeam, and is fully replicated Flutter version of the same. The original free course can be found here: designcode.io/swiftui-rive-animated-app --- This Flutter version as shown in the video is also completely free and open source. Source code: github.com/Aashu-Dubey/flutter-samples Web demo: aashu-dubey.github.io/flutter-samples/#/course-rive On a different note, there's another version of this project created by me using Ionic + Angular + Capacitor, also free and open source, here's a source for anyone interested. Source code: github.com/Aashu-Dubey/Ionic-UI-Templates Web Demo: aashu-dubey.github.io/Ionic-UI-Templates/course-rive
This is realy awesome! Thank you so much for your easy explanation
Lovely 💐😍
Thank you Bhai 💖💖💖💖
awesome
amazing
Amazing video and explanation!! Thanks for this :)
This is an amazing tutorial! I wasn’t even interested in the animation nor the gesture handling, just wanted to see how you would tackle the rotation anchor point, but stayed and watched the whole thing! You’re explaining all the concepts very clearly, great job!
Thank you very much, glad you liked it 😊
Thank you for sharing, really cool! :)
What emulator are u using ?
The default iOS simulator we get in Xcode, same for Android.
🚀
Thank you!
Looks awesome. Subscribed for more videos about react native
Amazing.. thanks a lot. More animation work please 🥺
and please make video on react native more frequently
Sure, will do!
bro find you on reddit keep up the good work and yeah subscribed
Subscribed and excited for more videos like this.
Great work
Note:- IF you're Capacitor v4, there is a minor change in case of Android, in MainActivity. java you have to call 'registerPlugin' before 'super.onCreate' instead of after, as in the video. reference:- capacitorjs.com/docs/updating/4-0#change-registerplugin-order This change is only required for Capacitor v4.x projects, while everything stays the same in case of Capacitor v3.x.
This tip really helped me. 😍😍
note: v4 or *above* needs to do that
I have spent more than 12 hours to fix Thanks for your instructions! It's fix just 1 mnt!
It's simply does not work with Capacitor 4. "cap sync android" cannot find your plugin this way and will result "Msg: ERROR Error: Uncaught (in promise): Error: "CustomPlugin" plugin is not implemented on android Error: "CustomPlugin" plugin is not implemented on android
I tried the steps with Capacitor 4 project, just to make sure, while iOS is working fine, I was able to reproduce the error on Android. It seems because of a minor change for Android in v4, where you have to call 'registerPlugin' before 'super.onCreate' instead of after as in the video. reference:- capacitorjs.com/docs/updating/4-0#change-registerplugin-order After making the change, it worked on Android too, so that should fix the issue for you. Other than that this error also occur when plugin name is not same on JS, Android and iOS code, so also make sure of that. I'll mention this change in the pin comment.
@@massive.educator 😀thank you so much, this works
@@massive.educator I've searched everywhere and found nothing until I found your comment. Thank you!
awesome video thank you, can we use this technique to run capacitor app as a background /foreground service?
Thank you. I think, as we are allowed to use platform specific native code, if some API is available for that platform, it should be possible to integrate that in a Capacitor app (as you can see from a lot of existing plugins). Rest you can get a better idea from the Capacitor docs, if it can work for your specific use case, or try to find if there are some existing solutions by the community.