Тёмный

Framer Motion | Page Transitions in React 

Sam P
Подписаться 2,2 тыс.
Просмотров 43 тыс.
50% 1

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

 

15 сен 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 42   
@lukebarker6860
@lukebarker6860 Год назад
FYI for people still watching: exitBeforeEnter in AnimatePresence has been deprecated, use mode='wait' instead :)
@carlfike7504
@carlfike7504 Год назад
Have seen this explained on and off for a bit but never fully grasped it. Think I've come closer than ever before after seeing this video! Thanks!
@ramioooz
@ramioooz Год назад
Thank you. very nice tutorial
@bagusamrullah4371
@bagusamrullah4371 3 года назад
i LOVE finding out new growing channel with stuff like this , please keep doing what you are doing ! cant wait for another tutorial!
@pesahson
@pesahson 2 года назад
Jesus, I was wondering for so long why only me exit animation was working and not the inital one! It turns out adding that one prop solved it. Thanks!
@ssk7690
@ssk7690 Год назад
You've explained it so well in such less time man thank you for posting this
@ryaaan0751
@ryaaan0751 2 года назад
Thanks a lot!
@ead5590
@ead5590 3 года назад
Great stuff! From what I've searched on RU-vid, there isn't much Framer Motion content. Would be great if you could continue to add more Framer Motion videos. This video, on the other hand, sure did contribute to my understanding of using Framer Motion for cool page transitions. 👍🏻
@sampcodes
@sampcodes 3 года назад
Hey, thanks for letting me know! I've got some more Framer tutorials in the works :)
@ead5590
@ead5590 3 года назад
@@sampcodes - Brilliant! I look forward to it! ✌🏻
@thinkdigital2043
@thinkdigital2043 3 года назад
Loved it, not sure if yet ready to take a course at the moment but I would love to see more of this type of content.
@sampcodes
@sampcodes 3 года назад
Amazing, thank you so much for letting me know! Will keep putting this sort of content together :)
@sohailsaha7427
@sohailsaha7427 3 года назад
Excellent tutorial! I needed a short tutorial into page transitions, and this video was it! Thanks for making this!
@DominikButz
@DominikButz 2 года назад
My comment is late but thanks for the video. Couldn't make it work with react css transition group, but this library works like a charm
@MccZerk
@MccZerk 3 года назад
Fantastic tutorial, exactly what I needed.
@gabriel_dev
@gabriel_dev Год назад
Amazing tutorial! Thank you very much!!!!
@ruancosta4335
@ruancosta4335 Год назад
Great video, thank you!
@nikoloztskhvedadze4167
@nikoloztskhvedadze4167 3 года назад
very helpful tutorial thanks
@_hraymond
@_hraymond 3 года назад
Really helpful tutorial!
@hallex4407
@hallex4407 3 года назад
Thank you very much! It really helped me to improve my project
@pranjaldoorwar9743
@pranjaldoorwar9743 3 года назад
Great Video, Subscribed and Hooked !!!! Looking for more videos on Framer and GSAP.
@KromedesShooter
@KromedesShooter 2 года назад
thank you man! really helpful tutorial!
@abeechr
@abeechr 2 года назад
Nice work! Thank you.
@hardwired89
@hardwired89 3 года назад
cool , more content for learning framer motion sir
@franciscomontilla130
@franciscomontilla130 3 года назад
Amazing!!!
@ipovos
@ipovos 3 года назад
Good job!
@sampcodes
@sampcodes 3 года назад
Thank you so much!
@Troy-ol5fk
@Troy-ol5fk 2 года назад
Please make a video about stagger animation in framer motion
@kamel3d
@kamel3d 2 года назад
The audio seems to be out of sync with the video
@dhyanjyotidas9394
@dhyanjyotidas9394 3 года назад
please make videos on parallex scrolling using framer motion
@dalibouzaiene
@dalibouzaiene 3 года назад
great job! but I have a problem, I tried doing the same animation (shrink/grow) but the problem, it is shrinking and growing at the top of the page not in the middle like yours, any help ?
@dalibouzaiene
@dalibouzaiene 3 года назад
nvm fixed it : u can add originX: "50vw", originY: "50vh" in initial, animate and exit props
@designcoded7585
@designcoded7585 3 года назад
sir can you tell whats the difference between path spacing , path offset in framer motion what the exact use of it in svg animation
@svyatoslavtarasov1898
@svyatoslavtarasov1898 3 года назад
Спасибо.
@deletrious
@deletrious 2 года назад
there is a slight audio/video synchronization issue.
@sportshome6504
@sportshome6504 Год назад
the url to the source files is not working anymore
@FRguillaume.L
@FRguillaume.L 3 года назад
Very useful thanks ! But I can't seems to make it work (but got no error), when I do all the steps it broke my navigation, the URL changes but the content is not loaded anymore... in my app.js file :
@sampcodes
@sampcodes 3 года назад
Hey Guillaume! Could you possibly upload the full app.js file to GitHub Gists? That way I might be able to help out more. The only other thing I could think of - your location property must be created from the useLocation() hook, not useHistory() or window.location! Cheers!
@eskimo6097
@eskimo6097 3 года назад
Hi @@sampcodes, The useLocation hook breaks react-routing for me. I have looked at two other tutorials and it's the same thing. does not render any components, just stays static on the '/' page. gist.github.com/eskimojamz/8274d78dc0b18ebc5ad884f146add8dd gist.github.com/eskimojamz/178a8f81590e55c0d23c471c9764da3f Here are my App.js and index.js files. I would appreciate any help with this.
@eskimo6097
@eskimo6097 3 года назад
Oh nevermind, found the solution. Every component needs an "exit" or react-router will only change the url and not the view. stackoverflow.com/a/64328928/14666354 Great video, thanks! :D
@narayadewe7979
@narayadewe7979 2 года назад
6:22
Далее
My Top 5 Techniques for Web Animation
9:58
Просмотров 88 тыс.
Framer Motion (React Animation Library) Crash Course
1:12:31
Responsive Framer Motion with Tailwind CSS
15:09
Просмотров 56 тыс.
10 React Antipatterns to Avoid - Code This, Not That!
8:55
The Easy Way to Design Top Tier Websites
11:54
Просмотров 404 тыс.
The Story of Next.js
12:13
Просмотров 576 тыс.
Animating Presence with Framer Motion
11:58
Просмотров 22 тыс.
Building a Resizable Panel with Framer Motion
22:20
Просмотров 27 тыс.