Тёмный

Layered Parallax Scroll with React & Framer Motion 

Tom Is Loading
Подписаться 19 тыс.
Просмотров 44 тыс.
50% 1

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

Наука

Опубликовано:

 

25 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 23   
@CeezGeez
@CeezGeez 8 месяцев назад
simple yet beautiful! thanks!
@preetikhurana1337
@preetikhurana1337 5 месяцев назад
thanks a lot !! finally i got it !
@deepshikha6038
@deepshikha6038 Год назад
helped me a lot thanks
@voldemortvi4264
@voldemortvi4264 10 месяцев назад
as a beginner , this was really helpful im subbing !
@tomisloading
@tomisloading 10 месяцев назад
Super happy I could help!! :)
@mustafaeren9206
@mustafaeren9206 Год назад
another awesome video thanks 🙏
@tomisloading
@tomisloading Год назад
Happy to help!! :)
@gabrielnixsonjones7792
@gabrielnixsonjones7792 11 месяцев назад
I have multiple scroll based parallax animation which makes scroll laggy how to manage it????
@StringNullNaN
@StringNullNaN 5 месяцев назад
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 😅
@milon27
@milon27 7 месяцев назад
🎉🎉
@faculogos9655
@faculogos9655 Год назад
This is just great! Is it possible to make an horizontal scroll with Framer Motion?
@tomisloading
@tomisloading Год назад
Absolutely! Will put that on the list of videos to make soon :)
@faculogos9655
@faculogos9655 Год назад
@@tomisloading I've been looking for videos like this about Framer Motion for a while, suscribed!
@tomisloading
@tomisloading Год назад
@@faculogos9655 Thank you! I'll let you know what I get to it :)
@faculogos9655
@faculogos9655 Год назад
@@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).
@swetanksrivastava3159
@swetanksrivastava3159 Год назад
@@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.
@robertdjogo8810
@robertdjogo8810 10 месяцев назад
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 ?
@user-fy9zr3pk1o
@user-fy9zr3pk1o 8 месяцев назад
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.
@ChinnariNarashimha
@ChinnariNarashimha 12 дней назад
Is it responsive?
@togya4
@togya4 2 месяца назад
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?
@astitva1368
@astitva1368 10 дней назад
basically import those components to a base component and then apply same properties, component is now JSX afterall. It should work.
@benfrese3573
@benfrese3573 5 месяцев назад
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 :)
Далее
How To Create PRO 3D WEBSITES Tutorial From Scratch
54:55
Css Animation Effects Tutorial  | HTML | CSS
0:53
Просмотров 784 тыс.
The Parallax Effect // 5 Minute WebDev Project
5:01
Просмотров 607 тыс.
Create a Parallax Scroll - Framer Tutorial
10:29
Просмотров 1 тыс.
Insane Parallax Scrolling effect in Framer!
14:39
Просмотров 10 тыс.
This Simple Trick Makes Your Website 83% Better Looking
10:57
Subtle, yet Beautiful Scroll Animations
5:04
Просмотров 1,6 млн
The Framer Motion Scroll Animation Masterclass
9:23
Просмотров 21 тыс.
Parallax scrolling in 3 lines of code!
16:08
Просмотров 36 тыс.
How to Soldering wire in Factory ?
0:10
Просмотров 3,5 млн
НОВЫЕ ФЕЙК iPHONE 🤯 #iphone
0:37
Просмотров 97 тыс.