Video Scrolling in React - How to Sync Page Scroll with Video Playback

Поділитися
Вставка
  • Опубліковано 23 гру 2024

КОМЕНТАРІ • 96

  • @codegenix
    @codegenix  7 місяців тому +2

    What tutorial do you want to see next?

    • @digitalsahara6670
      @digitalsahara6670 7 місяців тому

      wow this is amazing content and explanation, would love to see more animation with framer motion or anything on the creative front, but really great job, this channel will blow up soon!

    • @digitalsahara6670
      @digitalsahara6670 7 місяців тому

      also the last few minutes of the video is blank , but thats after you finishe.d

    • @codegenix
      @codegenix  7 місяців тому +2

      I cannot describe how much I became happy after reading your comment🙏. Thank you very much.
      Should I create a full course on framer motion or just create short tutorials and tricks like this? What is your suggestion?

    • @prashlovessamosa
      @prashlovessamosa 7 місяців тому

      Tanstack Router.

    • @digitalsahara6670
      @digitalsahara6670 7 місяців тому

      @@codegenix Honestly, whatever you feel like doing because I think your explanation and ways coding is what sets you apart, i would love to see different tips and tricks man, but whatever you feel you want to do. just make sure to keep going !

  • @1337shadow
    @1337shadow 7 місяців тому +4

    This video is a gold mine, great work buddy

    • @codegenix
      @codegenix  7 місяців тому

      Much appreciated!

  • @ВладКеся
    @ВладКеся 7 місяців тому +2

    That's a cool video. Keep making videos. I think this video can be expanded not only how to work with this format but also how to insert text and animation for it.

    • @codegenix
      @codegenix  7 місяців тому

      I'm glad you liked it. Sure that's a great idea!

  • @mamad-dev
    @mamad-dev 7 місяців тому +1

    thats actually nice, keep it up !

    • @codegenix
      @codegenix  7 місяців тому

      I really appreciate it. Thanks! 🙏

  • @sagarpatel7246
    @sagarpatel7246 2 місяці тому

    You Sir have got a subscriber🖖

  • @kyo2846161
    @kyo2846161 7 місяців тому +1

    finally i got what's offset value means, thank you

    • @codegenix
      @codegenix  7 місяців тому

      I'm glad you learned something!

  • @IhorVyshniakov
    @IhorVyshniakov 7 місяців тому

    Wow! I definetely will try to reproduce it 🤘🔥

    • @codegenix
      @codegenix  7 місяців тому +1

      I'm so glad you liked it🙏

  • @omercumaalc4656
    @omercumaalc4656 7 місяців тому +1

    Oh my God, while I was wondering how I could do some things, you appeared before me. Congratulations, my friend, for a great job. I started learning React and you changed all my perceptions. Could I ask you to show me the parallax effects?

    • @codegenix
      @codegenix  7 місяців тому

      Wow, thanks I'm really glad you liked it. Parallax effects are really simple to implement in React and Framer Motion. You just add a positive or negative offset to the amount the content moves over the vertical axis while the user scrolls. It's really simple, and you can find great tutorials on UA-cam! Again thank you very much for your amazing feedback! You really made my day.

    • @omercumaalc4656
      @omercumaalc4656 7 місяців тому +1

      @@codegenix So can you give us other examples?

    • @codegenix
      @codegenix  7 місяців тому +1

      I am working on related tutorials sir. Sure!

    • @omercumaalc4656
      @omercumaalc4656 7 місяців тому +1

      @@codegenix thanks

  • @ks_records5418
    @ks_records5418 7 місяців тому +1

    Wow amazing video❤🔥

    • @codegenix
      @codegenix  7 місяців тому

      Thank you so much 😀

  • @sunder-kirei
    @sunder-kirei 7 місяців тому +21

    Last year, I noticed that apple was using a load of images for their hero animation, now I know why and how😮

    • @codegenix
      @codegenix  7 місяців тому

      Yes, Apple uses these kinds of animations very often!

    • @havefun5519
      @havefun5519 7 місяців тому

      Really? I just noticed they seem always use video.

    • @Sammysapphira
      @Sammysapphira 7 місяців тому

      Videos are just images in sequence

  • @TelliCode
    @TelliCode 7 місяців тому +1

    wow, that's amazing tricks

    • @codegenix
      @codegenix  7 місяців тому +1

      I'm glad you liked it!

  • @Aman_yadav1419
    @Aman_yadav1419 7 місяців тому +1

    Amazing video ...keep it up 💯👏

    • @codegenix
      @codegenix  7 місяців тому

      Thank you! Will do!

  • @praboth.c
    @praboth.c 7 місяців тому

    Amazing video 👏🏼

    • @codegenix
      @codegenix  7 місяців тому

      Glad you liked it!!

  • @Happyday-nn6rh
    @Happyday-nn6rh 7 місяців тому

    اموزش مفیدی بود‍🔥 😉🙏

    • @codegenix
      @codegenix  7 місяців тому +1

      Fadaye shoma!

    • @Happyday-nn6rh
      @Happyday-nn6rh 7 місяців тому

      @@codegenix Dam shoma garm ‍🔥

  • @mangoz7929
    @mangoz7929 4 місяці тому

    I was wondering why you chose to create a sequence of images rather than just using a element and scrubbing through it using js on scroll

    • @codegenix
      @codegenix  4 місяці тому

      Because it is not responsive at all with the worst performant. Using canvas for these types of problems is really great.

  • @edwardelrics2138
    @edwardelrics2138 7 місяців тому

    that was amazing dude,

  • @eladervate223
    @eladervate223 5 місяців тому +1

    Amazing!!!

    • @codegenix
      @codegenix  5 місяців тому

      Thank you! Cheers!

  • @jackshephard7920
    @jackshephard7920 7 місяців тому

    Nice work! I saw same effect with gsap before, now I learnt it with frame motion!

    • @codegenix
      @codegenix  7 місяців тому

      Glad you liked it!

  • @fagnermenezes5415
    @fagnermenezes5415 7 місяців тому

    thanks for knowledge ! amazing content

  • @khuramshahzad9089
    @khuramshahzad9089 7 місяців тому

    Great work bro. This shit is underrated.✊

    • @codegenix
      @codegenix  7 місяців тому +1

      I really appreciate it bro🙏

  • @sagarpatel7246
    @sagarpatel7246 2 місяці тому

    Can't believe in order to achieve the same animation I used a linear equation by taking scrollY as one variable and image number as another varible but whole tanked while checking responsiveness..

  • @Solo_playz
    @Solo_playz 7 місяців тому +1

    This is cool 😮😮
    BTW, Which Vs code theme u are using?

    • @codegenix
      @codegenix  7 місяців тому

      I'm very glad you like it! I am using "JetBrainsMono Nerd Font" and the theme is Dracula.

    • @Solo_playz
      @Solo_playz 7 місяців тому

      @@codegenix Thanx 🤝

  • @asmrjavascript_
    @asmrjavascript_ 7 місяців тому

    And your video is really nice and good content 😅

    • @codegenix
      @codegenix  7 місяців тому

      Thank you so much I really appreciate it!

  • @MrPeepa
    @MrPeepa 7 місяців тому

    Does this affect the loading speed of the page? As so many frames need to be loaded or is the first frame loaded and the rest of the frames are deffered?

    • @codegenix
      @codegenix  7 місяців тому

      Yes this will impact the performance a lot. Use few frames (not more than 1000 frames)

  • @nurs7503
    @nurs7503 7 місяців тому

    thank you bro, nice video

  • @Mr_Dimension
    @Mr_Dimension 7 місяців тому

    wonderful

    • @codegenix
      @codegenix  7 місяців тому

      Thank you! Cheers!

  • @azizhaydarov-q1t
    @azizhaydarov-q1t 7 місяців тому

    which theme u use?

    • @codegenix
      @codegenix  7 місяців тому

      I'm using "JetBrainsMono Nerd Font" and the theme is Dracula.

    • @azizhaydarov-q1t
      @azizhaydarov-q1t 7 місяців тому

      @@codegenix thank u

  • @abhinavke
    @abhinavke 7 місяців тому

    cool thing ⚡

  • @404-not-found-service
    @404-not-found-service 7 місяців тому

    wow thanks

    • @codegenix
      @codegenix  7 місяців тому

      You are welcome!

  • @havefun5519
    @havefun5519 7 місяців тому

    Wow, cool ~~~~~

    • @codegenix
      @codegenix  7 місяців тому

      Glad you liked it!

  • @thalesrodriguescardoso
    @thalesrodriguescardoso 7 місяців тому

    Very cool video!!!
    About that kind of video attached to scroll...
    This has to be used VERY carefully unlike what Apple does lmao
    I will be honest. These look fancy and cool, but everytime I see a page FULL of these like Apple's website, I absplutely hate it lol It makes it annoyngly hard to get to where u want, especially if u just wanna get to the bottom of the lage quickly. Imo is not worth it "UX speaking".

    • @codegenix
      @codegenix  7 місяців тому +1

      I really appreciate your amazing explanation! I strongly agree with you. There needs to be a balance in using these animations so they don't hurt the user experience. Accessibility is the main factor in an amazing UX, and these types of animations can sometimes ruin it.

  • @sunder-kirei
    @sunder-kirei 7 місяців тому +1

    😮

  • @devadharsank
    @devadharsank 7 місяців тому +1

    zustand and stripe

    • @codegenix
      @codegenix  7 місяців тому

      Zustand is a great idea!

  • @vnlwsr
    @vnlwsr 7 місяців тому +1

    Why I'm think you are Persian, Are you ?

    • @codegenix
      @codegenix  7 місяців тому

      You're right bro

  • @asmrjavascript_
    @asmrjavascript_ 7 місяців тому

    Heyy I noticed you only upload your channel 7 video. How to grow it 🤯🤯😵 ?? Please explain and give me the tips and I think you use bot subscribe and view, like to grow?? I am correct or not???

    • @codegenix
      @codegenix  7 місяців тому +2

      When you put work and time on your content you really see the results. All of my subscribers and views are organic and I have never tried those tools. You can tell it by the interactions of each long form videos. If you ever try to use those tools, your channel will be banned and UA-cam is very smart these days.

    • @codegenix
      @codegenix  7 місяців тому +1

      Just see what you are really good at and passionate about, then create a video on it.

    • @asmrjavascript_
      @asmrjavascript_ 7 місяців тому

      @@codegenix Thank you so much your reply..

    • @codegenix
      @codegenix  7 місяців тому +1

      You are welcome

  • @Mamalizzam
    @Mamalizzam 7 місяців тому +1

    bro are you iranian?

    • @codegenix
      @codegenix  7 місяців тому +2

      Are mashti😅

  • @egplay8653
    @egplay8653 4 місяці тому

    Your country is show😂