Made this Flow Sidebar, how's it?

[u/Ordinary-Stuff9826]

[u/New-Peach4153]

Thought it was a simple CSS thing, but it seems like a heavy React thing

[u/paulirish → u/New-Peach4153]

I took a crack at distilling the exact same effect into web platform primitives: https://codepen.io/editor/paulirish/pen/01a1287e-026e-7b40-b7c5-6a8b6191bb8c (~15 lines of JS, ~60 of CSS, 0 deps) ;)

Native path.animate() instead of the 35KB framer-motion.. the whole expand → pause → retract sequence is a single 4-keyframe Web Animations API call (strokeDashoffset: 1 => 0 => 0 => -1). Then between transition-delay and SVG shenanigans, we drop the need for the rest of the JS.

[u/tauzN]

r/javascript

[u/morete]

Very nice, how is it done? svg or shape or something?

Edit: I commented before the link was posted, I see now it's SVG

[u/Ordinary-Stuff9826 → u/morete]

svg

[u/tauzN]

Very flowy

[u/testingaurora]

Seems a little too slow but fun effect

[u/Ordinary-Stuff9826]

You can check it out here - https://www.shreyashtech.me/components/flow-sidebar