I’m pretty interested in this effect, just a bit curious how modularization works within this library. I.e. if I am using styled components for making all of my components, each component existing with its style sheet in a directory of its own in the components folder, and then implemented on a “Page.jsx” file which will be rendered in App.jsx, should the Parralax features from this library be added to the components directly, or the Page.jsx file the components will be added to in order to build the actual view? I hope this made sense, typed it out on my phone at work rq 😅
Hey tom, please save me I want to do the same thing but with pages not images. Imagine that you have 2 components each hve 100vh and full of contents. Now the same thing aswhat you did here but with pages.what to do?
@@tomisloading I managed how to do it! But it will be interesting if you give a different solution. By the way, pherhaps I could mix the horizontal and vertical scrolling, I can't find the way to make it all smooth (I've tried with scroll-behavior: smooth but 1) Didn't work 2) If it works I wont be eable to experiment width customs "easy in-out" anyway, sooo... yes, I need help with that too, if its possible to manage it just width Framer Motion).
@@faculogos9655 For making the animation smooth, you can wrap your component with another motion.div and add all the animation properties on div instead of your initial component. It worked in my case.
Great video! Some friendly Feedback: I think it was a bit too much Figma and then skipped over some, what I consider more important, stuff. I would've appreciated you trying to explain the "confusing" part about the `offset" ["start start, "end start"]` or show us a few more example with simple boxes. But that's just me (again!) complaining :) P.S: This is all your fault btw, you encouraged feedback last time :)
simple yet beautiful! thanks!
thanks a lot !! finally i got it !
helped me a lot thanks
another awesome video thanks 🙏
Happy to help!! :)
as a beginner , this was really helpful im subbing !
Super happy I could help!! :)
I have multiple scroll based parallax animation which makes scroll laggy how to manage it????
I’m pretty interested in this effect, just a bit curious how modularization works within this library. I.e. if I am using styled components for making all of my components, each component existing with its style sheet in a directory of its own in the components folder, and then implemented on a “Page.jsx” file which will be rendered in App.jsx, should the Parralax features from this library be added to the components directly, or the Page.jsx file the components will be added to in order to build the actual view? I hope this made sense, typed it out on my phone at work rq 😅
Quick question - Why didn't you use the Next Image element but instead decided to go for a div with backgroundImage set to the URL ?
I guess his main goal is just to show demonstration of making parallax scrolling. You can use Image component of next/image if you want.
🎉🎉
Hey tom, please save me I want to do the same thing but with pages not images. Imagine that you have 2 components each hve 100vh and full of contents. Now the same thing aswhat you did here but with pages.what to do?
This is just great! Is it possible to make an horizontal scroll with Framer Motion?
Absolutely! Will put that on the list of videos to make soon :)
@@tomisloading I've been looking for videos like this about Framer Motion for a while, suscribed!
@@faculogos9655 Thank you! I'll let you know what I get to it :)
@@tomisloading I managed how to do it! But it will be interesting if you give a different solution. By the way, pherhaps I could mix the horizontal and vertical scrolling, I can't find the way to make it all smooth (I've tried with scroll-behavior: smooth but 1) Didn't work 2) If it works I wont be eable to experiment width customs "easy in-out" anyway, sooo... yes, I need help with that too, if its possible to manage it just width Framer Motion).
@@faculogos9655 For making the animation smooth, you can wrap your component with another motion.div and add all the animation properties on div instead of your initial component. It worked in my case.
Great video!
Some friendly Feedback:
I think it was a bit too much Figma and then skipped over some, what I consider more important, stuff. I would've appreciated you trying to explain the "confusing" part about the `offset" ["start start, "end start"]` or show us a few more example with simple boxes. But that's just me (again!) complaining :)
P.S: This is all your fault btw, you encouraged feedback last time :)