Thread by @jh3yy

CSS Tip! 🚀

You can select the previous siblings of an element with :has() to create cool hover effects like this OS dock🔥 No JS 😎

:root{--lerp-1:0.525;}
a:has(+a:hover){
--lerp:var(--lerp-1);
translate: 0 calc(var(--lerp) * -75%);
}

Demo link and explanation below! 👇

First, here's that @CodePen link! 🚀

You'll need to be in Safari, Chrome BETA, or you can use Chrome/Firefox with flags enabled ⛳️

Try not only :hovering the items, but also tabbing through them too ✨

codepen.io/jh3y/pen/mdxgg…

How do we get the nice easing curve on :hover? 🧐

The trick is creating a set of custom properties based on an easing curve 🤓

For, example the easing curve custom properties for this demo are 👇

Then to apply this, we need rules that update the --lerp custom property on :hover or :focus for each item or block ✨

This code below caters for selecting 5 blocks with a combination of sibling combinators(+) and :has()👇

The last thing to do is apply that to the blocks themselves.

I'm also doing something a little fun here too 😅

Because the blocks are laid out with flexbox, I can use the --lerp value to alter the "flex" of each block 💪 And the translation of each item 🎈

But, how did I generate those "--lerp" values? The answer is @greensock 💪

It has an awesome utility for distributing values using easing curves which is exactly what I needed 🙌

I used that to build this demo that generates the code 🤓

👉 codepen.io/jh3y/pen/ExEJM… via @CodePen

If you wanna check out the GSAP utils, check them out here!

The one for this was "distribute" 😎

greensock.com/docs/v3/GSAP/g…

For more on CSS :has(), check out the article I wrote for @ChromiumDev 🙏

There are plenty of use cases in there and I'm sure there are still plenty of awesome use cases that people will discover as :has() lands in all the browsers 🙌

developer.chrome.com/blog/has-m105/

As for that browser support, it's almost there! 🤏

We've got :has() in Safari already and it lands in Chrome version 105. It's also behind flags in current Chrome releases and Firefox 😎

Exciting times! 😁

caniuse.com/css-has

And that's it!

Some weekend and evening tinkering led to putting this together 😅

The motivation was using easing curve values inside custom properties 🤓

Any questions, hit me up! 🙏