Very helpful, thank you! I have seen code examples of animation before, but watching you as you code and seeing how things change as your code changes makes it easier to understand.
Hey I just love your work and i just subscribed you with a bell notifications your content is soo soo valuable thanks for the content and plz do a video on this complete project as you have in your final project please it would mean a lot to me by the way THANKS MAN!!!! you are DOPE 🔥
Awesome work sir.. I want to implement this in a RN project, but I want to use text. Any advice? Can I interpolate views or components in the output range array, or how can I go about changing the content based on the interpolate values. Thanks again!
useNativeDriver = true, will perform faster / better animations. You should use this when you are only animating opacity and transform properties. But if you need access to properties other than opacity and transform, ( e.g. width or height) , you should set it to false ( because as of yet, native driver does not support other properties)
I do really like everything: the animation, the technique and your clear explanation, well done. I just didn't get why you make `useNativeDriver` `false` ?
Can you do Samsung's One UI animation of the settings screen? On the scroll, the settings text fades away and the scrollable part sticks to the top and on the scroll back the animation reverses.
In my last video I’m doing the sticky footer + custom animation, inspired by Medium article. Check it out and let me know if this helped you. Thanks Shriganesh ✌️
I recommend to do nothing but one big project in vanilla JavaScript, HTML and CSS. Then, when you're done, do the same project (if you want) in React. JSX sintax is pretty similar to HTML, and you'll use CSS as well
I highly recommend to start using JavaScript, HTML and CSS. React is JavaScript so as long as you know JavaScript, building apps eith React should be that hard, but first it’s better to understand the concepts behind JavaScript IMO.
Because I don’t want to directly mutate the animated value. React.useRef returns a mutable value and it’s persistent during component lifecycle. Here are the docs with examples: reactnative.dev/docs/animated
Code was perfectly working in ios but in android emulator getting error like "Project with path ':unimodules-core' could not be found in project ':unimodules_react-native-adapter". any suggestions plz
If you follow-up the GitHub link from the description, there's an implementation of this slider with multiple slides and you can see how to move from a slide to another. Please let me know if you need any help with it. Thanks!
Dude, fire video. Short and great. I wonder how this would look with reanimated. If anyone wants an expo snack, here it is (using the git repo): snack.expo.io/@git/github.com/catalinmiron/react-native-dot-inversion
wow thanks man, my friend shows me this kind of animation using flutter, and he really underestimate RN. Now i can flex it to him ahahahah
😊
😂
WOW! I shouted "WOW" loudly once you changed the bg color, and the magic appeared!
Welcome back ! That animation is so dope, thanks for teaching us 🔥🔥🔥
Thanks Aman 🤗
Any concept explained this way, with incremental introduction of code vs explanation is a winner.
😊
Hi! Brazil here! As I'm learning react-native with expo, I ended up falling for your video, which by the way is sensational, congratulations.
Complicated Animation simply done, Nice job Catalin
I’m glad that you liked it!
you won my subscription with this animation haha, thanks a lot for putting this together
Very helpful, thank you! I have seen code examples of animation before, but watching you as you code and seeing how things change as your code changes makes it easier to understand.
This is great, man. I already had a good handle on animations, but this is next level and still somehow simple
Thanks Jared, for more cool animations you should check my Patreon page, you’ll not be disappointed ✌️
Great! Now i have an imagination of what's possible with animations in RN. Thanx a lot!
Imm glad that you found it useful. Thanks Andre ✌️
This was fantastic! Thank you. Very clear explanation, and super creative too!
I’m glad you liked it! Thanks Jack ✌️
@@CatalinMironDev 👍
😂
Awesome tutorial! Looking forward to completing your other ones too.
That is AWESOME!
Thank you for the tutorial!
Wow initially it was looking very complicated, in actual its very simple, that's awesome.
Thank you! Cheers!
So nice animation and really well explained. You won a new sub haha
Awesome, thank you Tama! ✌️
This guy can animate anything
This Guy Is Just Amazing .
He Deserves More Subscribers.
i killed that subscribe button , Keep It Up Man 🔥
Wow, thanks for showing your support Yadav. Thanks a lot ✌️
Now that I saw it i must use it.
Dude, that was good! Really good!!
I'm gonna now try to use animations like this in a screen/page change.
😊
😊
How did percentage values in tranform translateX work in your code? It's asking for a number value in mine
Really a cool example
Thank you so much for your clear explanations! You helped me so much :D
You’re welcome Haret ✌️
Thanks a lot for this tutorial, very helpful!
I’m glad that you liked it. Thanks Khouloud ✌️
Great job dude!
Wow! Thank you Sir
Hey I just love your work and i just subscribed you with a bell notifications your content is soo soo valuable
thanks for the content
and plz do a video on this complete project as you have in your final project
please it would mean a lot to me
by the way
THANKS MAN!!!! you are DOPE 🔥
Really really really awesome . Fantastic.
Very good.
You have my like and subscription.
I activated notifications too
Thank you! I’m glad you liked it. There’s a new video published in case you want to learn more :)
Awesome work sir.. I want to implement this in a RN project, but I want to use text. Any advice? Can I interpolate views or components in the output range array, or how can I go about changing the content based on the interpolate values. Thanks again!
I love this channel
you are absolutely awesome...you'll reach more subscribers soon
Thank you so much for showing your support 🤗✌️
Awesome explanation, thanks for the knowledge
Glad it was helpful! Thanks Youssef ✌️
Looks so good. I'm gonna try something with this.
Please do and share the results! Thanks Mohd! ✌️
Nice one. Thank you
well done mate !! you nailed it 🔥🔥🔥
Thanks a lot! 🙏
I get an error in React Native for Android it says BackgroundColor is not supported by native animated module, how did you do that animation?
how can you set translateX to a percentage instead of a number ??? it does not work for me ???
pls let me know if you found a solution to this
I get the error: Invariant Violation: Transform with key of "translateX" must be a number: {"translateX":"0%"}
Any idea how to fix this?
Thank you very much.
Mindblowing is your animation 👌
🤯 thanks Egy!
Wow, nice dude
thank you friend!!!
Thank you bro! Great job!
Thank you Denis ✌️
Woah! Loved it 🔥
Thanks Darshit 🔥
Thank you nice tutorial ! When it comes to useNativeDriver, what drives the choice of false or true ?
useNativeDriver = true, will perform faster / better animations. You should use this when you are only animating opacity and transform properties. But if you need access to properties other than opacity and transform, ( e.g. width or height) , you should set it to false ( because as of yet, native driver does not support other properties)
Keep up u are grate
*nice* I like that
Great work bro. 👍
i love it
I do really like everything: the animation, the technique and your clear explanation, well done. I just didn't get why you make `useNativeDriver` `false` ?
Hi Ihab, useNativeDriver can be used only for transforms and opacity and in my example I was interpolating colors as well.
@@CatalinMironDev got it. Thanks 🙏
awesome
Thanks for the video, really interesting!
Is the 0.001 value in the color input range really needed? 🤔
The whole point is to have the same color in [0, 0.5] range, but you are right, this is not needed. Great suggestion! Thanks!
good work
very good! Thx for that!
Glad you liked it Pierre!
this is really amazing!
love your work!
How can I use this with React Navigation?
Wonderful explanation. (Y)
Glad it was helpful! Thanks Pavan!
broooooo this is awesome
I’m glad you found it useful. Thanks Ankit! ✌️
Freakin' awsm
Perfect ❤️🙏🏻🎉
Thank you Emre!
Can you do Samsung's One UI animation of the settings screen? On the scroll, the settings text fades away and the scrollable part sticks to the top and on the scroll back the animation reverses.
In my last video I’m doing the sticky footer + custom animation, inspired by Medium article. Check it out and let me know if this helped you. Thanks Shriganesh ✌️
@@CatalinMironDev You can show the demo using pan gesture handler, that would be awesome.
Cool
Thanks Deric ✌️
Woow 😍👍🏼
Thanks a lot! 🙏
Wow change of background! where are you now miron? Not in romania i guess lol
:) I'm in Prague, Czech Republic for 2.5 years now :)
plase answer me , do i have to do multiple projects with js or jump direcly to do them with react what do you think bro
I recommend to do nothing but one big project in vanilla JavaScript, HTML and CSS. Then, when you're done, do the same project (if you want) in React. JSX sintax is pretty similar to HTML, and you'll use CSS as well
I highly recommend to start using JavaScript, HTML and CSS. React is JavaScript so as long as you know JavaScript, building apps eith React should be that hard, but first it’s better to understand the concepts behind JavaScript IMO.
❤️❤️❤️
Really nice, could you show us how to do it in reanimated also? 😍
I can do it. It should be the same Animated.Value starting from 0. I’ll add this in my future videos 👍
u can this animation in moti? and compare please
nice!
Thanks Erik
Keep it up
5 star
Thanks 🙏
Can u please help making react native fully functional audio and video player?
hey please make the full part with gesture handler
Yees, I’ll do it.
Why do you use React.useRef(new Animated.Value(0)) ?
Because I don’t want to directly mutate the animated value. React.useRef returns a mutable value and it’s persistent during component lifecycle. Here are the docs with examples: reactnative.dev/docs/animated
@@CatalinMironDev thanks bro😁. So can I use
animatedValue.setValue() with useRef? Or this isn't recommended use setValue?
Hey thanks for this.Can u provide full scratch project that is on react native node js for beginners.
Hi, I already created this kind of project. You can check my series from this playlist: ruclips.net/p/PLQocKVqyqZDQrUU7zUfFogbAO0ynvQK2j. Thanks!
@@CatalinMironDev ok thanks
🤙🏽💪🏿💪🏿
Please try to create in React Native cli...This will help more in production app development.
you could have explained from scratch not started code . could not get it yet.
Hi i am new to react native ,is this code worked in react native cli also
Yes, the code works using react native cli. Thanks Saritha ✌️
Code was perfectly working in ios but in android emulator getting error like "Project with path ':unimodules-core' could not be found in project ':unimodules_react-native-adapter". any suggestions plz
Who's here after Reddit ;-)😃😃
did anyone figure out how to implement this on android?
How to go to another page when the animation is finished
If you follow-up the GitHub link from the description, there's an implementation of this slider with multiple slides and you can see how to move from a slide to another. Please let me know if you need any help with it. Thanks!
why do you use light theme, aww that hurt 💔
I switched to a dark one and hopefully you like it. Thanks for sharing your feedback Abdullah ✌️
@@CatalinMironDev that's so nice of you. I like your videos a lot, easy to understand and implement. Keep up the good work. 👌
"mind blowing"
Dude, fire video. Short and great. I wonder how this would look with reanimated. If anyone wants an expo snack, here it is (using the git repo): snack.expo.io/@git/github.com/catalinmiron/react-native-dot-inversion
Ffs use dark mode man, my eyes cant see shit on the white bg. How u dare to even do that ._.
awesome
Thanks!