Hi @LeWolf there are 3 ways “how to” I can thing of right now.
in your case you have in first stage
div with black background and no border, in stage two you have white background with black border. This
div have `border-radius: 50%"
first let see what tool we have:
you can animate
bg color and
border color so in first stage you can create bg black with border white or transparent (you have no option to add border in this case) and then animate their change.
you can animate 2 absolutely positioned elements with opacity. Create 2
div elements set position absolute and then animate their opacity. It will be PIN to do this way but in some cases it can be useful.
Switching class while using observer (similar to option 1). Create two classes eg.
border: 1px solid black;
and use JS
intersection observer to switch these classes. It is up to you what approach is suitable for you.
You can also
scale element down while inactive and scale it back when active but this is another story.