Loading video...

Video Failed to Load

Go Home

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

PixelJanitor's profile picture

Derek Briggs

10,555 subscribers

34,183 views • 16 days ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

keyboard-accessible resizable sidebar was achieved: - increased action area - cursor stays the same while dragging, no flickering - double-click to reset to default width - arrows for 10px resize - shift + arrows for 50px resize
0:24

keyboard-accessible resizable sidebar was achieved: - increased action area - cursor stays the same while dragging, no flickering - double-click to reset to default width - arrows for 10px resize - shift + arrows for 50px resize

dmytro

95,611 views • 8 months ago

Neat piece is the responsive morph using CSS min() ✨ [popover] { transition-property: display, width, height; transition-behavior: allow-discrete; width: anchor-size(width); @​starting-style { width: min(640px, 100vw - 2rem); }}
0:22

Neat piece is the responsive morph using CSS min() ✨ [popover] { transition-property: display, width, height; transition-behavior: allow-discrete; width: anchor-size(width); @​starting-style { width: min(640px, 100vw - 2rem); }}

jhey ʕ•ᴥ•ʔ

64,806 views • 1 year ago

Introducing Nim, the first motion-primitives template. A minimal personal website with an MDX blog and animated components. Built with Next.js 15, React 19, Tailwind CSS v4, and Motion.
0:26

Introducing Nim, the first motion-primitives template. A minimal personal website with an MDX blog and animated components. Built with Next.js 15, React 19, Tailwind CSS v4, and Motion.

Ibelick

27,854 views • 1 year ago

I couldn't resist doing a quick little animation using @sentinelWinder 's model. Yummy hoomans!
0:21

Sensitive content

I couldn't resist doing a quick little animation using @sentinelWinder 's model. Yummy hoomans!

🔞 Danger N00dle 🔞

37,472 views • 2 years ago

Study, dissect, and recreate this motion design in under 10 minutes using Lottielab Quick impromptu tutorial
11:16

Study, dissect, and recreate this motion design in under 10 minutes using Lottielab Quick impromptu tutorial

Daryl Patigas

224,183 views • 10 months ago

I had a lot of fun building this crate using the non-destructive primitives in Adobe Substance 3D Modeler. Built entirely in desktop, no VR for this one. #madewithsubstance #substance3d #substance3dpainter #substance3dmodeler
0:59

I had a lot of fun building this crate using the non-destructive primitives in Adobe Substance 3D Modeler. Built entirely in desktop, no VR for this one. #madewithsubstance #substance3d #substance3dpainter #substance3dmodeler

Gio Nakpil

27,513 views • 1 year ago

Quick little intro to Figma Motion, and doing things the old fashioned manual way.
29:29

Quick little intro to Figma Motion, and doing things the old fashioned manual way.

Gary Simon

22,122 views • 1 month ago

💡8 new figma tips shared at #config23!!! How to add and organize your new variables, use auto layout wrap, set max/min width, and more!!.. 👇
0:34

💡8 new figma tips shared at #config23!!! How to add and organize your new variables, use auto layout wrap, set max/min width, and more!!.. 👇

Molly Hellmuth Tsacudakis

101,205 views • 3 years ago

That satisfying seconds-hand tween. Just a fast tween using elastic easing function
0:28

That satisfying seconds-hand tween. Just a fast tween using elastic easing function

sleitnick

20,358 views • 1 year ago

pov: your vibecoder friend demoing what he built using his $200 claude code max plan
0:58

pov: your vibecoder friend demoing what he built using his $200 claude code max plan

dev

395,731 views • 5 months ago

A stop-motion fight using laundry
0:30

A stop-motion fight using laundry

Interesting AF

73,310 views • 2 years ago

POV: your vibe coder friend showing you what he built using his $200 claude code max plan
0:55

POV: your vibe coder friend showing you what he built using his $200 claude code max plan

Om Patel

357,593 views • 5 months ago

what HyperFrames + Claude Code can do: motion video done with 2 prompts, 10 mins. here's a quick 4-min tutorial on how you do it yourself link in thread:
4:11

what HyperFrames + Claude Code can do: motion video done with 2 prompts, 10 mins. here's a quick 4-min tutorial on how you do it yourself link in thread:

Bin Liu

44,522 views • 3 months ago

🎉 Announcing Radix Themes—a beautiful, open source component library that’s built on top of the primitives so many developers love.
0:37

🎉 Announcing Radix Themes—a beautiful, open source component library that’s built on top of the primitives so many developers love.

Radix by WorkOS

297,712 views • 3 years ago

3️⃣ Add some filters: ➢ Liquidity: $10k ➢ MCap: $100k - $1M ➢ Max pair age: 72 hrs ➢ Min 24h buys: 50 ➢ Min 24h sells: 30 ➢ Min 5m txns: 10 Using these filters, pick any token.
0:41

3️⃣ Add some filters: ➢ Liquidity: $10k ➢ MCap: $100k - $1M ➢ Max pair age: 72 hrs ➢ Min 24h buys: 50 ➢ Min 24h sells: 30 ➢ Min 5m txns: 10 Using these filters, pick any token.

Rekt Fencer

21,113 views • 2 years ago

Raising a little garden from latent space On M2 Max, using SD 1.5, ControlNet, TripoSR, and three.js. Sped up for brevity.
1:45

Raising a little garden from latent space On M2 Max, using SD 1.5, ControlNet, TripoSR, and three.js. Sped up for brevity.

Evan Jones

110,369 views • 2 years ago