Building an Elastic Slider with Framer Motion and Radix

Use Framer Motion to add a rubber band effect to a Slider built with Radix UI!

TIMESTAMPS:
0:00 – Before + After
0:39 – Moving the icon
5:31 – Animating on release
7:26 – Stretching the bar
12:24 – Animating the right icon
19:36 – Stretching the bar right
22:58 – Refactoring: Removing a MotionValue
26:00 – Refactoring: Removing magic numbers
31:04 – Refactoring: Centralizing business logic
35:52 – Decaying the overflow (Rubber Band effect)
39:37 – Grow on hover
46:51 – Bouncing the icons
48:47 – Final demo

[selfheavenly]

I just want to point out how incredible it is that you show different approaches while explaining each step. It really helps to broaden the perspective on the available tools and ways to build something. Great job, Sam!

[WalterKimaro]

Two things about Sam's videos.

1. Like most of us animation lovers, he's always like a kid at a candy store with Framer Motion videos, (see 11:16).
2. He paces them so well, starts small, and builds up in complexity, showing the problems before solving them which makes for a really fantastic learning experience.

If you haven't purchased a build UI subscription, you're missing out.

[erikplachta]

Appreciate these longer format teaching sessions. Your ability to break down and simplify complex problems into easy to digest segments is top tier.

Thank you for taking the time to put these videos together man.

[adeemmmm]

When i watched and finished the video, i didn't notice an hour is gone lol

Learned a lot, thank you

[adriancoliba]

Thanks for your fantastic work! Especially the recent longer-format videos. Your dedication to quality and the smooth delivery is truly commendable.
I remember enjoying your live session video, and can only wonder what it would be like to see similar format content, where you explore even longer, raw, coding sessions. Watching you navigate through a fun hour of coding, or explore a new library or tackle refactors would provide invaluable insights. (Just a thought from a greedy bastard 😀

[Tjkrusinski]

This video is incredible. I have stayed away from framer for unknown reasons up to now. Thank you.

[emmanuelbyiringiro]

It's like revealing hidden gems! Thanks Sam.

[xorlop]

Woooo! I love learning from you so much. :)))

[iamcasted]

I love the content you produce so much

[ashleyredman]

Absolutely amazing content, thank you!

[SogMosee]

dude your niche is interesting: you know how to decipher apple animations (likely written in swift) into framer motion javascript animations.

that takes some pretty hefty deductive reasoning as well as a keen eye and even a bit of ocd (correcting the misspelling of overflow and setting a fixed width for the displayed the values), but it also speaks volumes to the person (or people?) at apple who design and implement these ux interactions. I wonder who they are.

[saurabhprakash]

Excellent stuff @Sam, when are you planning for discount on your courses. I am interested in life time subscription.

[ziacodes]

Do more nextjs content and micro interactions are the best!

[SogMosee]

I wish you would use panda css instead of this tailwind hieroglyphics

[SogMosee]

also did you major in mathematics in college?