Video Scrolling in React - How to Sync Page Scroll with Video Playback
Рет қаралды 31,879
20 күн бұрынIf you want to sync a video playback with the amount of scrolling a user has done in React, just follow these steps.
You will learn how to set up an image sequence playback sync scrolling (the amount that user has scrolled) in React and Framer Motion.
How to sync video (images sequence) playback with page scroll in React?
#react #framer_motion #scrolling
🔗 Links:
Project on Github: github.com/codegenixdev/video...
Gist: gist.github.com/codegenixdev/...
Also if you want to have the video.mp4 in the video, just check the public folder of the repo. But you can still continue without it.
🎨 My Editor Settings:
- JetBrains Mono
- Dracula
@codegenix 18 күн бұрын
What tutorial do you want to see next?
@digitalsahara6670 18 күн бұрын
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 18 күн бұрын
also the last few minutes of the video is blank , but thats after you finishe.d
@codegenix 18 күн бұрын
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 18 күн бұрын
Tanstack Router.
@digitalsahara6670 18 күн бұрын
@@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 !
@sunder-kirei 17 күн бұрын
Last year, I noticed that apple was using a load of images for their hero animation, now I know why and how😮
@codegenix 17 күн бұрын
Yes, Apple uses these kinds of animations very often!
@havefun5519 12 күн бұрын
Really? I just noticed they seem always use video.
@Sammysapphira 9 күн бұрын
Videos are just images in sequence
@1337shadow 15 күн бұрын
This video is a gold mine, great work buddy
@codegenix 15 күн бұрын
Much appreciated!
@jackshephard7920 13 күн бұрын
Nice work! I saw same effect with gsap before, now I learnt it with frame motion!
@codegenix 13 күн бұрын
Glad you liked it!
@user-tk6yw5rd7u 18 күн бұрын
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 18 күн бұрын
I'm glad you liked it. Sure that's a great idea!
@IhorVyshniakov 8 күн бұрын
Wow! I definetely will try to reproduce it 🤘🔥
@codegenix 7 күн бұрын
I'm so glad you liked it🙏
@Random-zz3jo 16 күн бұрын
I was really enjoying the video until i saw you only have 1.75K, you are so under rated, although my subscription won't do much but u have it, great video!
@codegenix 15 күн бұрын
Wow, thank you!
@mamad-dev 9 күн бұрын
thats actually nice, keep it up !
@codegenix 9 күн бұрын
I really appreciate it. Thanks! 🙏
@fagnermenezes5415 10 күн бұрын
thanks for knowledge ! amazing content
@codegenix 9 күн бұрын
My pleasure!
@kyo2846161 9 күн бұрын
finally i got what's offset value means, thank you
@codegenix 9 күн бұрын
I'm glad you learned something!
@Aman_yadav1419 15 күн бұрын
Amazing video ...keep it up 💯👏
@codegenix 15 күн бұрын
Thank you! Will do!
@Happyday-nn6rh 13 күн бұрын
اموزش مفیدی بود🔥 😉🙏
@codegenix 13 күн бұрын
Fadaye shoma!
@Happyday-nn6rh 13 күн бұрын
@@codegenix Dam shoma garm 🔥
@tanvirahammed8957 8 күн бұрын
wow, that's amazing tricks
@codegenix 8 күн бұрын
I'm glad you liked it!
@ks_records5418 16 күн бұрын
Wow amazing video❤🔥
@codegenix 16 күн бұрын
Thank you so much 😀
@nurs7503 13 күн бұрын
thank you bro, nice video
@codegenix 13 күн бұрын
You're welcome!
@edwardelrics2138 11 күн бұрын
that was amazing dude,
@codegenix 11 күн бұрын
Hey, thanks!
@omercumaalc4656 16 күн бұрын
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 16 күн бұрын
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 KZfaq! Again thank you very much for your amazing feedback! You really made my day.
@omercumaalc4656 16 күн бұрын
@@codegenix So can you give us other examples?
@codegenix 16 күн бұрын
I am working on related tutorials sir. Sure!
@omercumaalc4656 16 күн бұрын
@@codegenix thanks
@praboth.c 9 күн бұрын
Amazing video 👏🏼
@codegenix 9 күн бұрын
Glad you liked it!!
@Mr_Dimension 4 күн бұрын
wonderful
@codegenix 4 күн бұрын
Thank you! Cheers!
@khuramshahzad9089 9 күн бұрын
Great work bro. This shit is underrated.✊
@codegenix 9 күн бұрын
I really appreciate it bro🙏
@omprakash2929_ 11 күн бұрын
And your video is really nice and good content 😅
@codegenix 11 күн бұрын
Thank you so much I really appreciate it!
@abhinavke 9 күн бұрын
cool thing ⚡
@codegenix 9 күн бұрын
I'm glad!
@404-not-found-service 2 күн бұрын
wow thanks
@codegenix 2 күн бұрын
You are welcome!
@havefun5519 12 күн бұрын
Wow, cool ~~~~~
@codegenix 12 күн бұрын
Glad you liked it!
@Solo_playz 10 күн бұрын
This is cool 😮😮 BTW, Which Vs code theme u are using?
@codegenix 10 күн бұрын
I'm very glad you like it! I am using "JetBrainsMono Nerd Font" and the theme is Dracula.
@Solo_playz 10 күн бұрын
@@codegenix Thanx 🤝
@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 7 күн бұрын
Yes this will impact the performance a lot. Use few frames (not more than 1000 frames)
@sunder-kirei 17 күн бұрын
😮
@thalesrodriguescardoso 9 күн бұрын
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 9 күн бұрын
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.
@devadharsank 17 күн бұрын
zustand and stripe
@codegenix 17 күн бұрын
Zustand is a great idea!
@user-jr9lc1en4v 9 күн бұрын
which theme u use?
@codegenix 9 күн бұрын
I'm using "JetBrainsMono Nerd Font" and the theme is Dracula.
@user-jr9lc1en4v 5 күн бұрын
@@codegenix thank u
@vnlwsr 5 күн бұрын
Why I'm think you are Persian, Are you ?
@codegenix 5 күн бұрын
You're right bro
@omprakash2929_ 11 күн бұрын
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 11 күн бұрын
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 KZfaq is very smart these days.
@codegenix 11 күн бұрын
Just see what you are really good at and passionate about, then create a video on it.
@omprakash2929_ 11 күн бұрын
@@codegenix Thank you so much your reply..
@codegenix 11 күн бұрын
You are welcome
@Mamalizzam 12 күн бұрын
bro are you iranian?
@codegenix 12 күн бұрын
Are mashti😅
ByteGrad
Рет қаралды 806 М.