Layered Parallax Scroll with React & Framer Motion
Вставка
- Опубліковано 28 лип 2024
- Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ www.hover.dev
Developer portfolio templates to help you in your job hunt ✨ tomisloading.gumroad.com/
Today we'll make a layered parallax scroll effect using React & the Framer Motion animation library.
📚 Project Links
code: github.com/TomIsLoading/frame...
🔗 My Links
TikTok: / tomisloading
Instagram: / tomisloading
GitHub: github.com/TomIsLoading
Twitter: / tomisloading - Наука та технологія
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.
Is it responsive?
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.
🎉🎉
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?
basically import those components to a base component and then apply same properties, component is now JSX afterall. It should work.
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 :)