Building a Resizable Panel with Framer Motion
Ойын-сауық
Learn how to use Framer Motion and react-use-measure to build an auto-resizing panel that animates its height whenever its children change.
🪄 Framer Motion course: samselikoff.com/framer-motion...
🚀 Demo: bit.ly/3mDYioM
🧑💻 Code: bit.ly/3Hgrzzf
- 0:00 - Intro
- 1:00 - Animating height with useMeasure
- 3:44 - Extracting a component
- 4:47 -Using children as a key to animate the contents
- 11:33 - Adding exit animations
- 14:00 - Removing animation on initial render
- 17:25 - Building a fade-out-then-in animation
- 19:04 - Building a slide animation
- 20:18 - Outro
Пікірлер: 59
Your videos are exceptional in so many ways. Not only you show a variety of different challenges in React, but you go through the problem with us, the viewers. This makes your videos more generic, cause the library will change, but the method to solve the problems should stay useful for a long time. Thank you for that!
@samselikoff
2 жыл бұрын
You are so welcome, and thank you for such a nice message! ☺
@nnamdi6739
Жыл бұрын
the same reason i subscribed
The way you solve some of the problems really teaches us, the viewers, about not only how to fix the problem itself, but many other small concepts which can help in a long run. Again, awesome video, really enjoyed it!
@Chavez3d
2 жыл бұрын
I agree and I wish he could teach that skill
Sam you are a one of a kind teacher! Does this come as natural as it looks? Extremely grateful for your videos
@samselikoff
2 ай бұрын
Thank you! I've been teaching in some capacity since college, but there's also plenty of editing :)
This is awesome. I love these kinds of videos where you take us through your thought process and solve it together with the viewer, lots of great nuggets to take away.
Glad I discovered your channel, you have really nice content, one of the best out there for sure, really enjoying it, thanks for your work, keep it rolling :)
We have to protect this man at all costs! He's the only guy on this platform that easily explain complex animations!!!
You're my favorite KZreadr! Can't wait for your course!!
Very well explained. I use framer-motion daily and still learned a couple things here. Thank you, mate, great vid!
Absolutely love it, i like your approach about showing the possible problem that can occur and solving it with explanation why "this" method is the best
Fisrt time watching one of your videos, liked, subscribed and waiting for the course. I love it
Framer is amazing, ty for making it so easy to learn.
The way you approach the problem is just fantastic! You don't just show the solution. You show your whole thought process which is fascinating to watch. How does one get so good with React? I've been using it for about a year now and while I certainly have gotten a lot better at it. I yet to be even close to your level. So what should I learn. Or what kind of projects outside of work can I build?
Sam, great tutorials! I bought your Build UI course. It's fantastic, lots of useful information. I feel like I learned Framer Motion within a week. Just a small tip: Current solution doesn't work with input elements as when you type it changes state and ResizablePanel re-renders. So I found another solution - use `use-resize-observer` instead of `react-use-measure`. In this case, we don't need to use stringified children as key and re-render won't happen.
@SogMosee
9 ай бұрын
I can't get it to work with this use-resize-observer, specifically when closing the accordion. The height doesn't shrink back on close. Do you have an example somewhere of how youre using this hook with framer motion?
@SogMosee
9 ай бұрын
nvm I think I figured it out. Should look like this: function Item() { const { ref, height } = useResizeObserver(); return ( ... {isOpen && children} ) } Some things to note: - no AnimatePresence needed - two layers of div; ref is attached below height div but above toggled children - height must default to 0 since it is undefined at first, which will break the animation
amazing solution!🙌
You just saved my day. Excellent explanation!
you sir is a bundle of Advanced Knowledge!! What a great teacher!! GOD bless you Samuel/Samson!
Thank you for your tutorial! Very helpful!
Your videos are so underrated its illegal
Amazing stuff, thank you
Hey man, thanks for this video, helped me to solve an issue with a reusable radix dialog size transitions, I even managed to do a back and forth transition for the content in the modal, it looks pretty cool!.
Soooo Goood!!!! Thanks Sam!
Wow, awesome!!
Great example!
Very Good!
THank you so much
i learned so much
Me during the video: Man, this guy teaches so good." Really tho, you explain things so well 🙏
Helpful
You're really fucking good at this.
You are next level. I'd love a video on your IDE and browser set up. I've never seen a set up so clean. Are you on Mac? I don't think my Windows has that cool panel separator between the IDE and browser. How do you how a browser that looks maximizes (no URL bar, etc)?
@samselikoff
2 жыл бұрын
Thanks! Yep that's MacOS's fullscreen feature, but I only use it when I record. However I do keep my VSCode very clean.
This dude is the bees knees holy shit
Hi Sam, thanks for the awesome video!❤ I was surprised that you never mentioned the layout prop from framer-motion in this video. I am not too familiar with it, but isn’t it’s purpose to solve similar problems? Thanks again!
@samselikoff
2 жыл бұрын
Great question, you know I should have mentioned it because when I first started experimenting I tried many different approaches with layout. But I couldn't get something that worked well. There were some issues of stretching, which you can fix with more nested layouts, but even then I couldn't get it to work how I wanted. This has happened to me in the past and usually when I just go for the slightly less declarative version of measuring height/width and animating height/width explicitly, things work out much much better. Layout has worked for me in situations where everything is being absolutely positioned, but in this case I wanted to explicitly make sure the document reflowed and any content below the box was pushed down. Just my experience so far and I do plan on learning + teaching more about layout, but that's where I am now!
@TheMrbaws
2 жыл бұрын
@@samselikoff alright, thanks for the detailed reply and this great video!
Awesome! What’s the command for wrapping elements in a div in Vs Code?
Hey, great video! Any chance you could share your vscode theme?
Hey Sam, what shortcut did you use at 15:45 to refactor occurrences, that was pretty cool. Also thank you so much for the video the idea of using a jsonified children prop as key sounds brilliant :D
@samselikoff
Жыл бұрын
That's VSCode's "Rename Symbol", you can access it from the command palette or press F2!
@RockRespawn
Жыл бұрын
@@samselikoff thank you so much Sam really appreciate these videos 🔥
Is there a reason for the `let` usage over `const`?
notifications gang checking in
Dude do you have any recommendations for where I can learn to view React the way you do? Most courses teach just how to use React but not why it operates the way it does, like how you explain it. I would love to learn more but I don't know where I would even start :)
@shiyunze7157
2 жыл бұрын
Dan Abramov, one of the React maintainers, shared a lot of React internals. You can probably search for his blog and talks.
how about extracting all the text in children for the key, maybe even generate a hash out of it?
@prashank
2 жыл бұрын
there's object-hash on npm that can generate unqiue hash string from an object, that should work too i assume. I don't use react (i am a vue man) so I can't test it :(
how can you have a detailed answer to every problem I encounter :DD
Thanks, I can't find this answer in Google
Does it work with width as well?
@samselikoff
Жыл бұрын
You should be able to copy the technique, useMeasure also provides { width} !
Is it just me or this guy legit looks like Sebastian Stan (aka Winter Soldier from the MCU)😂🔥🔥
Ooohps!! I did already liked this video, I can't like again only comments are allowed 🤩