Interpolate with ScrollView like a pro (React Native Reanimated 2)

Поделиться
HTML-код
  • Опубликовано: 12 янв 2025

Комментарии •

  • @RambleOnRose42
    @RambleOnRose42 3 месяца назад

    holy crap THANK YOU SO MUCH for providing a written version of this tutorial. you have NO idea how incredibly helpful that is for those of us who are hard of hearing (and also, just, like, really really bad at youtube tutorials)!!!!

  • @fabrizia5777
    @fabrizia5777 3 года назад +14

    I was struggling with the interpolate function and you made it much more clear, thanks a lot!

    • @Reactiive
      @Reactiive  3 года назад +2

      I'm glad you liked it. I will publish today a video on the interpolateColor function. Stay tuned for more content!

  • @LeandroSimoesArt
    @LeandroSimoesArt 3 года назад +9

    What makes your tutorials much better than all that I've been seeing is that you really explain why you are using the values that you use, some people just throw the values on the screen and say nothing about them and you have to figure it out all by yourself.
    Awesome video! Please! Keep doing that!

    • @donatobaonguis4315
      @donatobaonguis4315 2 года назад

      i agree on this comment... well done and thank you for this tutorial!

  • @Spaceizcool
    @Spaceizcool Год назад +2

    You sir, are an amazing teacher. I watched your introduction video to react native reanimated and I had to watch more. Finding good tutorials like this one is priceless. You explain things from a first principles perspective and I think it's safe to say I picked up on the fundamentals of animations in react native in just a few hours. Thank you so much.

    • @Reactiive
      @Reactiive  Год назад

      Thank you very much! I really appreciate your feedback 🍻

  • @bettadevindonesia9246
    @bettadevindonesia9246 2 года назад +1

    The way you explain about interpolate is amazing!!! x, input, output range is clearly to understand!!! WTF going on my screen!!!! I just learn React Native in 2 weeks and found your playlist on RUclips. Thanks to GOD guide me in right way... you're is my first prophet in React Native journey.
    Hat Off!

    • @Reactiive
      @Reactiive  2 года назад +1

      Thank you very much! You're going to love your React Native journey 😁

  • @clemensphilipse901
    @clemensphilipse901 3 года назад +7

    Really informative video, I really like that you explain all of the code that you write. Keep it up!

    • @Reactiive
      @Reactiive  3 года назад

      Hi Clemens, thank you very much for the feedback. The purpose of the videos is to be as informative as possible. I will always continue to explain everything from scratch!

  • @santd3400
    @santd3400 19 дней назад

    Why haven't I seen your great video until now? Thanks bro

  • @kirillcherkalov
    @kirillcherkalov 3 года назад +3

    thank you a lot for claryfaying how interpolation function work !

  • @merveillevaneck5906
    @merveillevaneck5906 8 месяцев назад +1

    Very nicely done! Good content and really shows how reanimated can be used!

    • @Reactiive
      @Reactiive  8 месяцев назад

      Thanks a lot for your feedback!

  • @kimjisena
    @kimjisena 7 месяцев назад +1

    Your content is exactly what I needed at this stage of my career. Thank you so much.

    • @Reactiive
      @Reactiive  7 месяцев назад

      Thank you! I really appreciate your feedback :)

  • @sagarahir8566
    @sagarahir8566 11 месяцев назад

    Great explanation. I was looking for animation tutorial. You explained it much easier.

  • @wailuthman5679
    @wailuthman5679 Год назад

    such an amazing explanation you earned my subscription.

  • @pranjalsoni17
    @pranjalsoni17 3 года назад +3

    Thank you very very much! Please keep making videos! Very informative and helpful! Thank you!

    • @Reactiive
      @Reactiive  3 года назад +1

      Thanks a lot for your feedback! 😊

  • @daljeetsingh5127
    @daljeetsingh5127 3 года назад +4

    OSM Video
    you are really a master in teaching
    I really like the way you explain each thing please add more videos like this on your channel thanks once again

    • @Reactiive
      @Reactiive  3 года назад +1

      Hi Daljeet, glad you liked it! Feel free to check out my latest video (Skateboard Deck Onboarding). It brings the same concept of this video into a real-world scenario :)

    • @daljeetsingh5127
      @daljeetsingh5127 3 года назад

      ​@@Reactiive Thanks, already watched that video ,Now waiting for new stuff :D,
      Is it posible for you ? To add video like this with flatlist in functional components just a basic stuff.
      one thing can we use the the (useSharedValue from reanimated lib. ) in flatList header Componet i tried it will only work when the screen is render first after that no.
      I tried with "const translateY = React.useRef(new Animated.Value(0)).current; " it working fine with useSharedValue only works one when screen is render First
      Hope this make scense
      Thanks for your all videos

  • @zanfet
    @zanfet 2 года назад +1

    Killer tutorial as always!

  • @harunergingonen2656
    @harunergingonen2656 3 года назад +2

    It was so clear explanation, thank you so much. Keep it up!

  • @lltatoll
    @lltatoll 3 года назад +2

    Thank you for great tutorials! It is very helpful

  • @YuryiBabrou
    @YuryiBabrou Год назад +1

    Thanks a lot for so clear explanation!

  • @vigneshwaraneswaramoorthi4117
    @vigneshwaraneswaramoorthi4117 3 года назад +2

    Good explanation. Got some ideas about interpolation.

    • @Reactiive
      @Reactiive  3 года назад

      Hi Vigneshwaran, feel free to check out my latest video (Onboarding Skateboard Deck). It uses more or less the same concept in a slightly more advanced way 🛹

  • @antoniovuono4521
    @antoniovuono4521 Год назад

    Very nice dude. I’m learning a lot.

  • @topher_512
    @topher_512 2 года назад

    Thanks a bunch for posting this. At work I have an animation that I'm working on which uses the regular Animated API and is based on the the position of a ScrollView. I was a little bit lost on how I could do the same thing using reanimated, so this was really helpful.

  • @melkerlarsson4219
    @melkerlarsson4219 3 года назад +1

    Great tutorial! You made it easy to understand!

  • @sumantabhui5489
    @sumantabhui5489 2 года назад

    Thank you for making the video. It was really helpful for understanding the concept

  • @sarcasticdna
    @sarcasticdna 3 года назад +1

    Congo on 300 subs 🎉

  • @jiiiiiiiiin4911
    @jiiiiiiiiin4911 Год назад

    super clear explanation, thanks a lot!

  • @todoeldiaencasa
    @todoeldiaencasa 2 года назад

    I'm learning a lot doing all the videos!! Thanks love your tutorials :)

  • @it-coding
    @it-coding 3 года назад

    I would be glad to see the subtleties with improved performance

  • @doniaelfouly4142
    @doniaelfouly4142 2 года назад

    very helpful tutorial , thank you

  • @DjProducer6T9
    @DjProducer6T9 3 года назад +1

    Very helpful 🙏🏼

  • @mahonealex4615
    @mahonealex4615 3 года назад +2

    Thank you

  • @felixfigueroa
    @felixfigueroa 3 года назад +1

    Excellent...Thanks you.!

  • @denisotim7640
    @denisotim7640 3 года назад +2

    thankyou!!!

  • @mr.mesnawy
    @mr.mesnawy 3 года назад +1

    please keep it up

  • @Prasanth_Venkatachalam
    @Prasanth_Venkatachalam 3 года назад +1

    Thanks for the video,
    How to use diffclamp in interpolate?

  • @HellGuyRj
    @HellGuyRj 3 года назад +2

    God Tier.

    • @Reactiive
      @Reactiive  3 года назад

      Hi Yash, thanks a lot! By the way the interpolate function from reanimated is extremely powerful. It seems hard but with practice it becomes very intuitive 🤓

  • @sandakelumhalkewela7854
    @sandakelumhalkewela7854 2 года назад

    Thanx for the great contents

  • @harunergingonen2656
    @harunergingonen2656 3 года назад +2

    How can i do the same animation with a button ? I want to click a button and auto scroll to next page ?

    • @Reactiive
      @Reactiive  3 года назад +1

      Hi Harun, the next video will probably handle this feature. I won't give you any more spoilers 😜

  • @mr.mesnawy
    @mr.mesnawy 3 года назад

    why when you pass the entire translateX Object to the Page component the whole animation breaks down?

  • @ddikodroid
    @ddikodroid 3 года назад +1

    Do you have a plan to make some videos about Moti?

    • @Reactiive
      @Reactiive  3 года назад +4

      Hi Diko,
      Now I'm focusing on react-native-reanimated 2 and react-native-gesture-handler because they allow to make low-level animations giving you many more degrees of freedom but in the future making videos also on Moti could be an idea. If you're interested in Moti right now @eveningkid has already made some great videos and I absolutely recommend them.

  • @shebeeradimaly6125
    @shebeeradimaly6125 2 года назад

    liked

  • @axe-z8316
    @axe-z8316 2 года назад

    TERRIBLE explanation hahaha ( for the scale interpolation and clamp ) Show dont tell.