Loading video...

Video Failed to Load

Go Home

Built a quick little resizable elastic min/max width sidebar using Motion primitives.

35,086 views • 2 months ago •via X (Twitter)

33 Comments

Mery's profile picture
Mery2 months ago

@motiondotdev You and the attention to details 🔥

Derek Briggs's profile picture
Derek Briggs2 months ago

You don' kno' me!

Joe Lee's profile picture
Joe Lee2 months ago

@motiondotdev super nice, love that the toggle animation is simpler. been playing with elastics this week too

nanda's profile picture
nanda2 months ago

@motiondotdev clean af

Derek Briggs's profile picture
Derek Briggs2 months ago

@motiondotdev

Damian Chmiel's profile picture
Damian Chmiel2 months ago

@motiondotdev Add a double click to get back to the default width

Derek Briggs's profile picture
Derek Briggs2 months ago

@motiondotdev May have to try that, but these types of things feel like the "half open macbook" theory where users are forced to set it to where they want it to be, not where it was put for them.

Damian Chmiel's profile picture
Damian Chmiel2 months ago

@motiondotdev yeah, that’s a fair point. but if i resize the sidebar to a specific width, then later make it narrower or wider, it would be nice if the app remembered my previous width. that way, a double-click could restore it to the exact width i had set before

Derek Briggs's profile picture
Derek Briggs2 months ago

@motiondotdev Follow up: Added a double click that just always returns it to the default width 👍🏻

Damian Chmiel's profile picture
Damian Chmiel2 months ago

@motiondotdev You the champ!

Deckard 💻's profile picture
Deckard 💻2 months ago

@motiondotdev Elastic UI is always a win for me

Ankur's profile picture
Ankur2 months ago

@motiondotdev rubber banding ftw

Derek Briggs's profile picture
Derek Briggs2 months ago

@motiondotdev 🙌

Alvish 🧙‍♂️'s profile picture
Alvish 🧙‍♂️2 months ago

@motiondotdev 😮‍💨

Jacob Jolibois 🇺🇸's profile picture
Jacob Jolibois 🇺🇸2 months ago

@motiondotdev Super nice 👌🏼 I need to bring that rubber banding into our sidebar component.

Derek Briggs's profile picture
Derek Briggs2 months ago

@motiondotdev Thanks!

Will King's profile picture
Will King2 months ago

@motiondotdev Love built in friction

Chris Frantz's profile picture
Chris Frantz2 months ago

@motiondotdev great interactions

Julian Bissekkou 💙's profile picture
Julian Bissekkou 💙2 months ago

@motiondotdev can you share how its done?

Marco Fortes's profile picture
Marco Fortes2 months ago

@motiondotdev Now add something like this

Masudur Rahman's profile picture
Masudur Rahman2 months ago

@motiondotdev 👌

Chris Nijhof's profile picture
Chris Nijhof2 months ago

@motiondotdev love the bounce :)

Dmytro Chuta's profile picture
Dmytro Chuta2 months ago

@motiondotdev That’s cool! I’ve had endless issues with the standard one. It works terribly.

Igor bedesqui's profile picture
Igor bedesqui2 months ago

@motiondotdev so nice

Zinger's profile picture
Zinger2 months ago

@motiondotdev Ooo that's nice! One of my favorite small details with these is that double-clicking the line resets it to a default width since my OCD brain can never decide

Philip Dren's profile picture
Philip Dren2 months ago

@motiondotdev Really like the close mechanism 🙌

Aleksej K's profile picture
Aleksej K2 months ago

@motiondotdev I feel weirdly uncomfortable. I would avoid using an app that teases me like that.

Jaynal Abedin's profile picture
Jaynal Abedin2 months ago

@motiondotdev Premium UI is all about the little things, and this is a perfect example.

ijon's profile picture
ijon2 months ago

@motiondotdev cool

Renildo Pereira's profile picture
Renildo Pereira2 months ago

@motiondotdev smooth

Ilya Kruchinin's profile picture
Ilya Kruchinin2 months ago

@motiondotdev Looks good. Do you have a repo with this?

AJ1732's profile picture
AJ17322 months ago

@motiondotdev How’d you achieve this?

Robin's profile picture
Robin2 months ago

@motiondotdev 这个交互效果太舒适了

Related Videos