I am using animejs for the first time. I tried out a few tutorials from the documentation which worked file. I then tried to use an SVG with a div that followed the SVG's path exactly as shown in this Codepen how for some reason the div does not move at all.
Note: I am using animejs from a cdn. I have also tried downloading the file and using it, but I get the same problem.
Here is my code...
window.onload = () => {
var path = anime.path("path");
anime({
targets: "div",
translateX: path,
translateY: path,
rotate: path,
duration: 3000,
loop: true,
easing: "linear",
});
anime({
targets: "path",
opacity: 0,
duration: 6000,
loop: true,
direction: "alternate",
easing: "easeInOutExpo",
});
}body {
background: grey;
}
div,
.green {
position: absolute;
background: green;
top: 0.5rem;
left: 0.5rem;
width: 1rem;
height: 1rem;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.js"></script>
<body>
<section>
<article>
<svg>
<path
fill="#000"
stroke="#000"
d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"
/>
</svg>
<div class="green"></div>
</article>
</section>
</body>
The
pathvariable returned fromanime.path("selector");is function. As described in docs you should call it with"x","y"or"angle"