Path Easing Debugging #278
Description
I am trying to understand how path-easing works in a tween.
I am trying to tween the x attribute of a SVG rect using path-easing, while pth0 works perfectly, pth1 fails. I am not sure why this happens.
I thought that for any given d attribute of a SVG path supplied in path -easing, it can control the speed/value based on the path and tween from start (100px) to finish (250px).
Can you please explain why this happens and how I can make the rect x to tween from 100 to 250 using pth1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="viz">
<svg id="svg-container" width="500" height="300">
<rect id="my-rect" x="100" y="100" width="50" height="50" fill="#3498db" />
</svg>
</div>
<script src="https://cdn.jsdelivr.net/npm/@mojs/core"></script>
<script>
// ref - https://codepen.io/sandstedt/pen/oNLdBrq
const pth0 = mojs.easing.path("M0,100 C50,100 50,67.578125 50,50 C50,32.421875 50,0 100,0")
//ref- https://codepen.io/sdras/pen/JRQXGz
const pth1 = mojs.easing.path("M0,400S58,111.1,80.5,175.1s43,286.4,63,110.4,46.3-214.8,70.8-71.8S264.5,369,285,225.5s16.6-209.7,35.1-118.2S349.5,258.5,357,210,400,0,400,0");
// Get the rect element
const rect = document.getElementById("my-rect");
const animation = new mojs.Tween({
onUpdate: (t) => {
const val1 = pth0(t);
const val2 = pth1(t);
//console.log(val, val2);
rect.setAttribute("x", `${100 + 150*val1}`); // Update x position based on progress
},
duration: 1000
}).play();
</script>
</body>
</html>