Framer Motion Scroll-Based Animation with useScroll Hook

👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Add authentication to your app FAST: bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): email.bytegrad.com
⏱️ Timestamps:
0:00 Explanation
#webdevelopment #coding #programming

[@_SABARIVASANS-cy7qw]

Thanks a lot. I learnt flexbox from you which gave me confidence as a developer. Now with animation you boosted it.

[@austinimbastari2760]

This was great thank you, please make more of these videos<3

[@Mobilemaniaplays]

Please make a whole video on framer motion

[@MASTERRAGE]

Thanks A lot, the offset explanation was exactly what I was looking for.

[@chhavimanichoubey9437]

Even though this video doesn't have views, it's informative and useful.

[@genosgaming8381]

thanks for that , it was helpful ❤❤

[@collinsk8754]

Brilliant!

[@Miguel-em2yj]

Thanks for this, i have a question, i use the hook "useScroll" in a component named "Header", and i want to animate the backgroundPositionY with the scroll of the full viewport, do i have to use ref in here or just useScroll(), and use scrollYProgress ? because is not working for me D:, Thank you Awesome videos as always.

[@born2die827]

And how can I archive this without to map my elements? Is there no way to use ref for multiple elements?

[@ahmedismaiell]

Thanks a lot <3

[@santiagogaleazzi8109]

[“0 1”] means that the start of the target will touch the end of the container and not the other way around

[@SiemkaSiema]

The Framer motion animation is not smooth because CSS transition interferes with it

[@GabrielMartinez-ez9ue]

Please make a series on framer motion! The documentation sucks

[@syed.simanta820]

Make super cool animation with framer motion reactjs

[@warlord126]

please try to be straight to the content mentioned in title of the video because its inspires to skip the video

[@piscopancer]

I do not have 'offset' option. I am using typescript too. Do we have different versions?

[@MrHaideralwaqfi]

hi,

[@graphicupload1439]

Hi well content, but i facing trouble in using it in my code! can you provide me with this code ?

[@dananjayachathuranga7113]

❤

[@BhideSvelte]

Come straight to the point real video starts from :