Blake Lundquist's tutorial presents two techniques for implementing a moving-highlight navigation bar using only plain JavaScript and CSS. The first method utilizes the getBoundingClientRect method to animate the border between navigation items upon user interaction. The second method leverages the new View Transition API to enhance the animation experience. Given the advancements in JavaScript capabilities, these techniques allow for smoother transitions and improved user experiences in single-page applications, highlighting the modern tools available for DOM manipulation.
...the border around the active navigation item animates directly from one element to another as the user clicks on menu items.
The first technique uses the getBoundingClientRect method to explicitly animate the border between navigation bar items when they are clicked.
In 2025, we have much better tools to manipulate the DOM via vanilla JavaScript. New features like the View Transition API make progressive enhancement more easily achievable.
The second approach achieves the same functionality using the new View Transition API.
Collection
[
|
...
]