I have to build a small interesting navigation using ReactJs & Tailwind. Everything is almost done except animating an indicator when changing a position.
So everything is associated with an absolute position indicator, so I will only share information about it.
So it has 2 states (in order to dynamically define the position and width of the menu item):
const [indicatorWidth, setIndicatorWidth] = useState('');
const [indicatorPosition, setIndicatorPosition] = useState('');
and selecting menu items like:
const items: any = document.querySelectorAll(".menuItem");
So, in order to select a link from navigation, I have a click event on the link:
onClick={() => setActiveNav(i)}
And here is the function that will make it work:
const setActiveNav = async (index: number) => {
if (items[index]) {
setActive(index)
await new Promise(r => setTimeout(r, 0));
setIndicatorPosition(items[index].offsetLeft)
setIndicatorWidth(items[index].offsetWidth)
}
}
So at that point, only thing to define is style of the indicator like:
<span className={`nav-indicator`} style={{width: indicatorWidth, left: indicatorPosition}}/>
And to make it beautiful:
.nav-indicator{
position: absolute;
background: linear-gradient(90deg, #F27261 0%, #A63121 100%);
box-shadow: 0 0 300px 24px rgba(225, 63, 50, 0.6);
border-radius: 80px;
top: 0.70rem;
height: 70%;
transition: ease-in-out 0.3s;
}
So the problem comes in the end… I’m managing to animate the transition between changing the navigation. I should only make it to rotate it a bit before finalizing the select.
Should I use before and after? What would be the best way here?