I am using Anime.js to animate an SVG when mouseleave each item.
I have a list within a loop, with an SVG at the end of each list. The issue with my code is that all SVGs animate at the same time when hovering over each item. When I mouseleave each item, I would like the function to animate each SVG separately relative to the hovered item.
I don't know what I'm doing wrong, but I've been stuck for hours.
I could have simply animated with CSS, but it's hard to animate the SVG path as I want without using a library.
Here is my code:
let hoverItem = document.querySelectorAll(".item");
hoverItem.forEach((line) => {
line.addEventListener("mouseleave", function () {
anime
.timeline({
loop: false
})
.add({
targets: "path",
d: [
{ value: "M 10 80 Q 645 128 1290 80" },
{ value: "M 10 80 Q 645 11 1290 80" },
{ value: "M 10 80 Q 645 121 1290 80" },
{ value: "M 10 80 Q 645 34 1290 80" },
{ value: "M 10 80 Q 645 102 1290 80" },
{ value: "M 10 80 Q 645 65 1290 80" },
{ value: "M 10 80 Q 645 80 1290 80" }
],
easing: "easeOutElastic(1, .6)",
duration: 600
});
});
});
<ul>
<li class="item">
<div class="title">TITLE</div>
<svg width="1290" height="110" viewBox="0 0 1290 110">
<path d="M 10 80 Q 640 80 1290 80" stroke-width="1.5" stroke="#D7C9B8" fill="transparent" />
</svg>
</li>
<li class="item">
<div class="title">TITLE</div>
<svg width="1290" height="110" viewBox="0 0 1290 110">
<path d="M 10 80 Q 640 80 1290 80" stroke-width="1.5" stroke="#D7C9B8" fill="transparent" />
</svg>
</li>
<li class="item">
<div class="title">TITLE</div>
<svg width="1290" height="110" viewBox="0 0 1290 110">
<path d="M 10 80 Q 640 80 1290 80" stroke-width="1.5" stroke="#D7C9B8" fill="transparent" />
</svg>
</li>
</ul>
Any help would be appreciated.
line
you want to animate.