body {
display: grid;
place-items: center;
height: 100vh;
background: #121816;
color: yellow;
font-family: sans-serif;
font-size: 20px;
}
#nav {
display: flex;
gap: 36px;
margin: 5px 0;
}
.menu {
display: block;
cursor: pointer;
position: relative;
}
.menu.selected {
color: white;
}
.menu.selected .marker {
display: block;
visibility: visible;
}
.marker {
width: 100%;
height: 100%;
background: white;
position: absolute;
top: 0;
left: 0;
display: none;
visibility: hidden;
z-index: -1;
}
<ul id="nav">
<li class="menu selected">
<a href="#">home</a>
<div class="marker"></div>
</li>
<li class="menu"><a href="#">about</a></li>
<li class="menu"><a href="#">contact</a></li>
</ul>
const menuElements = gsap.utils.toArray('.menu');
const marker = document.querySelector('.marker');
let activeMenu = menuElements[0];
menuElements.forEach((menu) => {
menu.addEventListener('click', () => {
const state = Flip.getState(marker);
activeMenu.classList.remove('selected');
menu.classList.add('selected');
menu.appendChild(marker);
activeMenu = menu;
Flip.from(state, {
duration: 1.5,
ease: 'elastic.out(15,0.9)',
});
});
});