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

  • @greengohm
    @greengohm2 жыл бұрын

    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

    @samselikoff

    2 жыл бұрын

    You are so welcome, and thank you for such a nice message! ☺

  • @nnamdi6739

    @nnamdi6739

    Жыл бұрын

    the same reason i subscribed

  • @SamedGaming
    @SamedGaming2 жыл бұрын

    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

    @Chavez3d

    2 жыл бұрын

    I agree and I wish he could teach that skill

  • @asdasdadgfd
    @asdasdadgfd2 ай бұрын

    Sam you are a one of a kind teacher! Does this come as natural as it looks? Extremely grateful for your videos

  • @samselikoff

    @samselikoff

    2 ай бұрын

    Thank you! I've been teaching in some capacity since college, but there's also plenty of editing :)

  • @mryechkin
    @mryechkin2 жыл бұрын

    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.

  • @dmarushchak
    @dmarushchak2 жыл бұрын

    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 :)

  • @chubbyshady
    @chubbyshady Жыл бұрын

    We have to protect this man at all costs! He's the only guy on this platform that easily explain complex animations!!!

  • @ammargillani509
    @ammargillani5092 жыл бұрын

    You're my favorite KZreadr! Can't wait for your course!!

  • @pedroklepa
    @pedroklepa2 жыл бұрын

    Very well explained. I use framer-motion daily and still learned a couple things here. Thank you, mate, great vid!

  • @devyb-cc
    @devyb-cc Жыл бұрын

    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

  • @falilou_io
    @falilou_io2 жыл бұрын

    Fisrt time watching one of your videos, liked, subscribed and waiting for the course. I love it

  • @erikplachta
    @erikplachta Жыл бұрын

    Framer is amazing, ty for making it so easy to learn.

  • @mahmoudmohammed6225
    @mahmoudmohammed62252 жыл бұрын

    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?

  • @andrewkodkod
    @andrewkodkod Жыл бұрын

    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

    @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

    @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

  • @tamjuh212
    @tamjuh2122 жыл бұрын

    amazing solution!🙌

  • @csabanagy9890
    @csabanagy9890 Жыл бұрын

    You just saved my day. Excellent explanation!

  • @stanleychukwu7424
    @stanleychukwu74242 жыл бұрын

    you sir is a bundle of Advanced Knowledge!! What a great teacher!! GOD bless you Samuel/Samson!

  • @rchuhk100
    @rchuhk100 Жыл бұрын

    Thank you for your tutorial! Very helpful!

  • @eternalmangekyo022
    @eternalmangekyo022 Жыл бұрын

    Your videos are so underrated its illegal

  • @revillsimon
    @revillsimon Жыл бұрын

    Amazing stuff, thank you

  • @josephito27
    @josephito272 ай бұрын

    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!.

  • @kelvinpraises
    @kelvinpraisesАй бұрын

    Soooo Goood!!!! Thanks Sam!

  • @gabriellinassi3382
    @gabriellinassi33822 жыл бұрын

    Wow, awesome!!

  • @oleksandrluchytskyi6867
    @oleksandrluchytskyi6867 Жыл бұрын

    Great example!

  • @MagiCityProductions
    @MagiCityProductions Жыл бұрын

    Very Good!

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd6 сағат бұрын

    THank you so much

  • @justine_chang39
    @justine_chang39 Жыл бұрын

    i learned so much

  • @Rico-cp4xp
    @Rico-cp4xp2 жыл бұрын

    Me during the video: Man, this guy teaches so good." Really tho, you explain things so well 🙏

  • @abdkelanii
    @abdkelanii2 ай бұрын

    Helpful

  • @berad6034
    @berad6034 Жыл бұрын

    You're really fucking good at this.

  • @Human_Evolution-
    @Human_Evolution-2 жыл бұрын

    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

    @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.

  • @SogMosee
    @SogMosee Жыл бұрын

    This dude is the bees knees holy shit

  • @TheMrbaws
    @TheMrbaws2 жыл бұрын

    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

    @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

    @TheMrbaws

    2 жыл бұрын

    @@samselikoff alright, thanks for the detailed reply and this great video!

  • @papicisse9107
    @papicisse91072 жыл бұрын

    Awesome! What’s the command for wrapping elements in a div in Vs Code?

  • @Domynate
    @Domynate2 жыл бұрын

    Hey, great video! Any chance you could share your vscode theme?

  • @RockRespawn
    @RockRespawn Жыл бұрын

    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

    @samselikoff

    Жыл бұрын

    That's VSCode's "Rename Symbol", you can access it from the command palette or press F2!

  • @RockRespawn

    @RockRespawn

    Жыл бұрын

    @@samselikoff thank you so much Sam really appreciate these videos 🔥

  • @michalguy
    @michalguy Жыл бұрын

    Is there a reason for the `let` usage over `const`?

  • @swyxTV
    @swyxTV2 жыл бұрын

    notifications gang checking in

  • @shaunvanhuyssteen7966
    @shaunvanhuyssteen79662 жыл бұрын

    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

    @shiyunze7157

    2 жыл бұрын

    Dan Abramov, one of the React maintainers, shared a lot of React internals. You can probably search for his blog and talks.

  • @prashank
    @prashank2 жыл бұрын

    how about extracting all the text in children for the key, maybe even generate a hash out of it?

  • @prashank

    @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 :(

  • @beke2345
    @beke23452 жыл бұрын

    how can you have a detailed answer to every problem I encounter :DD

  • @chirkov
    @chirkov Жыл бұрын

    Thanks, I can't find this answer in Google

  • @saharnahaisi8475
    @saharnahaisi8475 Жыл бұрын

    Does it work with width as well?

  • @samselikoff

    @samselikoff

    Жыл бұрын

    You should be able to copy the technique, useMeasure also provides { width} !

  • @arjunsinghrawate7882
    @arjunsinghrawate78822 жыл бұрын

    Is it just me or this guy legit looks like Sebastian Stan (aka Winter Soldier from the MCU)😂🔥🔥

  • @raymondmichael4987
    @raymondmichael4987 Жыл бұрын

    Ooohps!! I did already liked this video, I can't like again only comments are allowed 🤩

  • @manishpanchal1098
    @manishpanchal1098 Жыл бұрын

Келесі