Border that transitions trough row of elements
How do I animate a border between a row of items? I provided a sample from the JetBrains website.
I know how to do this with js by manually calculating padding via button sizes, but I was wondering if there was a more "sleek" way of doing this with html and css directly (or react / svelte whatevs)
7 Replies
Hmm… interesting, I mean the border has to be its own element for it to be able to animate like that and doing it without JS, I don’t know. Interesting…
You can do that with CSS. Using a span combo and @keyframes..
How would the span know where to transition too (without JS)?
If you can do it with JS, you can also do it in React or Svelte. I won't say that this is impossible to accomplish with CSS only, but the amount of work it would take it's not worth the effort.
Transform translate, transform origin, position absolute,
Also. You can use clip-path
I wouldn't say it is not worth the effort. Very little effort compared to Js. It's also lighter and faster.. IMO.
perhaps this could help https://youtu.be/kep_Iaxuzy0
Sam Selikoff
YouTube
Animated tabs – with inverted text!
Use Framer Motion's layoutId and mix-blend-mode: exclusion to create some slick animated tabs!
🔗 LINKS
Code: https://buildui.com/recipes/animated-tabs
Build UI Lifetime Membership: https://buildui.com/#purchase
React Aria Components version: https://twitter.com/devongovett/status/1647818725662289920
🕐 TIMESTAMPS
0:00 – Intro
0:35 – Layout anim...
tysm everyone