"There's a pattern I've been implementing lately that creates a little follow-the-leader effect using anchor positioning. And the technique is pretty neat too. It involves creating a single follower (positioned) element and dynamically updating it's anchor on an event or state change. This could be in JavaScript (i.e. on click), or in CSS directly (i.e. on hover, focus/focus-within, updating the current-target, etc). Note: This technique is demonstrated using the CSS anchor positioning API, which is a part of Interop 2025."
"You also probably want it to smoothly animate between anchors, which can be done with a basic transition: .follower { /* transition the animation */ transition: top 0.5s ease; /* position the element relative to its anchor */ top: anchor(center); left: anchor(right); } Gotcha: you need to position the element with absolute positioning, since position-area does not yet allow animation into new positions."
A pattern creates a follow-the-leader effect by using CSS anchor positioning and a single positioned follower element. The follower uses position-anchor set to a named anchor variable (for example --hovered). Each potential anchor element updates anchor-name to that variable on events or state changes such as hover, focus, or JavaScript interaction. The follower positions itself with top: anchor(center) and left: anchor(right) and eases between anchors using transitions on top and left. Absolute positioning is required because position-area currently does not support animated relocation. Faster background animation and pseudo-element tricks improve the perception of catching up and prevent layout gaps. Chromium has shipped the API and WebKit plans support under Interop 2025.
Read at una.im
Unable to calculate read time
Collection
[
|
...
]