Loading video...
Video Failed to Load
This works by using: - normal border-radius - a ::before pseudo-element for the tab - Framer Motion to handle the drag interaction - a tiny distance-to-progress calculation that updates the border radii
309,845 views • 2 months ago •via X (Twitter)
36 Comments
That's cool. I built it a while ago. The biggest challenge is syncing it with nonlinear transitions:
ufff this is so goooood!
🙌thanks
recreated it using clip-path , this was a fun exercise for my frontend skills .
theres a point where it gets too pointy on the slide, i wonder if that can be fixed
This reminds me of the technique I used and explain in my how to round svg polygons @observablehq notebook:
Sooo good
really cool!
Very nice! Add smoothing to the curves (squircle style) and it’ll look even more organic I bet
Will do!
thank you for this
amazing post thank you
would you mind sharing what you created this animation with? it's so effective for explaining things!
Preety cool, the amount of details is crazy
So smooth!
superb
soo tufff
The devil is in the details. 😫
love your attention on details. gonna feature this on
That distance to progress trick is such a clever way to handle the drag.
that's beautiful
yes thank you so much for the debug view! so cool (:
Love those details nobody notices, they're what puts the app ahead of competitors.
Love the details
It's really good. 🔥
is there any design reasoning behind why the blue circle is smaller than the red one?
I love this.
sick ! recreating this right now !
This is so cool. Thanks for the clear breakdown
学到了，大佬 Learned something, expert!
Nobody will notice this
Could we have borders around the selected tab and the content area with this approach? I tried this but it got very messy
Distance-to-progress driving the border radii is such a clean trick. Most people overbuild this with SVG morphs — mapping drag distance to radius keeps it buttery and still reads like real material.
So cool!
This is so cool!
woww soo cool kevin 👏
![CSS Tip! ✨ It's 2024 and you have a new way to make animated borders 🚀 .glow::after { offset-path: rect(0 100% 100% 0 round var(--radius)); animation: loop; } @keyframes loop { to { offset-distance: 100%; }} Using the offset-* properties you can animate elements along the perimeter of others 😍 The rect() value gained support in Safari 17.2 🙌 To start, you create an element and put it inside your main element. For example, you put a span inside the button 🤙 Click me! Make the element fill its parent with absolute positioning and inset [data-glow] { position: absolute; inset: 0; } Now the good part, you use a pseudoelement on that element and define an offset-path [data-glow]::after { content: ""; offset-path: rect(0 auto auto 0 round var(--radius)); animation: loop 2.6s infinite linear; } With the rect value, you are saying the path fills the parent container: top: 0 right: auto || 100% bottom: auto || 100% left: 0 Then you can use round to make sure the path uses the same radius as whatever the parent has The @keyframes animation merely animates the offset-distance of that pseudoelement to 100% @keyframes loop { to { offset-distance: 100%; }} You can see this more clearly in the video 🫶 The offset-* properties also include an offset-anchor property. This allows you to dictate which point of the element follows the path. For example: anchor-offset: 100% 50%; This means that the "right, center" of the element will follow the perimeter of the parent element 🤙 Lastly, the visuals 🎨 For color, you can use a gradient such as a linear gradient to fill the pseudo-element. [data-glow]::after { background: radial-gradient( circle at right, hsl(320 90% 100%), transparent 50% ); } Then clip away everything so you only have the border and can still have translucent backgrounds, etc. Use a mask with mask-composite ✨ A little transparent border trick: [data-glow] { border: 2px solid transparent; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); mask-clip: padding-box, border-box; mask-composite: intersect; } Bit of a long one. Hope you find it useful 🙏 CodePen.IO link below 👇](https://image.24vids.com/tw-1752903535488823789/ext_tw_video_thumb/1752900027591151616/pu/img/d0sViTqgbe8N-yux.jpg)
