Framer Motion Scroll-Based Animation with useScroll Hook

Показать описание

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).

👉 Discord: all my courses have a private Discord where I actively participate

⏱️ Timestamps:
0:00 Explanation

#webdevelopment #coding #programming .
.

ByteGrad

Рекомендации по теме

Комментарии

Please make a whole video on framer motion

Mobilemaniaplays

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

santiagogaleazzi

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

_SABARIVASANS-cyqw

I can’t thank you enough! It helped me a lot, really enjoy your videos!

nickkoetzlertutorial

hi,
but I want to add a little note about the offset in useScroll; it seems that when you say {offset: ["start start", "end end"]} the first string mean when the animation will start and the second string means when the animation will end, for the first start in the first string indicate the top of the component which have the ref function and the second start indicate the parent component, in this case, it will the viewport and this mentioned information are applicable for the second string.
in the end, if you have another opinion please share it with us, I found your videos helpful after going through YouTube channels to learn more about reactjs.

MrHaideralwaqfi

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

austinimbastari

How we can position of img?

I mean we have img inside div and that div has 100vh height and our img left 0 we completely scrolled our div out img will be shift to right

jacquelynecarmen

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

chhavimanichoubey

Please make a series on framer motion! The documentation sucks

GabrielMartinez-ezue

It was very helpful as usual. Thanks a lot.

salmansadi

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

rezgui_aziz

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.

Miguel-emyj

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

borndie

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

upd: yeah, just updated the version... For some reason, npm did not install the latest package 😟

piscopancer