You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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>
The text was updated successfully, but these errors were encountered:
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
pth0works perfectly,pth1fails. 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.The text was updated successfully, but these errors were encountered: