const createTransitionEffect = (navLI, startCoord, endCoord) => {
const changeRate = 0.1;
let currentY = startCoord;
const animateChange = () => {
if (currentY !== endCoord) {
currentY += (endCoord - startCoord) * changeRate;
menuHover(navLI, currentY);
requestAnimationFrame(animateChange);
}
};
animateChange();
};
function menuHover(navLI, Y) {
const topTriangle = navLI.querySelector(".triangle").querySelector("polygon");
topTriangle.setAttribute("points", "0,0 200,0 100," + Y);
}
function navHoverIn(navLI) {
createTransitionEffect(navLI, 10, 60);
}
function navHoverOut(navLI) {
createTransitionEffect(navLI, 60, 10);
}<div onmouseenter="navHoverIn(this)" onmouseleave="navHoverOut(this)">
<svg viewBox="0 0 200 60" class="triangle">
<polygon points="0,0 200,0 100,10">
</svg>
</div>To smoothly transition the coordinate points of the polygon when hovering over the triangle, a convenient way is to implement an ease animation effect using JavaScript and requestAnimationFrame(). This allows for a gradual and visually pleasing change between the two states rather than an abrupt switch.