Future CSS Tip! 🔮 You can combine scroll-driven animation and anchor positioning to create a CSS only nav indicator 🤯 .el { animation: move; animation-timeline: --blog; } keyframes move {to { left: anchor(--blog left); }} Adapts to long text! 😎 CodePen.IO link below! 👇

Here's that @CodePen link! 🚀 You'll need to be in Chrome Canary to see this one in action as it requires Chromium 116+ 👀 But, it's pretty exciting to think what's possible with these APIs 🔥

And here's a shot of it updating to really long text in real-time 😎 CSS anchor-positioning will grab the left and right of whatever element is asked for and it will return a live value 🔥 [contenteditable] to the rescue! 😅

The gist of this demo is that 1. Anchor an indicator to the "Home" link 2. As we scroll animate a custom property change 3. That updates the CSS anchor position with the indicator moving to the relevant anchor 🤓 There's a little more to it than that. But, it's Friday! 😅

@CodePen you..are goated

@CodePen Pretty neat! That would solve a problem I'm currently facing, gonna try to implement this with Tailwind

@CodePen @SaveToNotion

@CodePen I can see this being very popular. Single page sites with clear sections will have usable navigation. 🤌🏻

@CodePen You can do that with basic HTML & CSS, just saying why do all the extra work

@CodePen This is just HTML & CSS 🤔 Show me how you create the nav indicator without using the new APIs