How can I get this to work with just the motionPath parameter?
var tween = gsap.to(".ball", {
duration: 5,
repeat: -1,
ease: "none",
// onUpdate:,
motionPath: {
path: (rawPath) => {
MotionPathPlugin.cacheRawPathMeasurements(rawPath);
setPosition(MotionPathPlugin.getPositionOnPath(rawPath, tween.progress()));
},
align:"#pathd",
autoRotate: true,
alignOrigin: [0.5, 0.5],
}
For example Initially the settings were set as
path: "#path"
align:"#path"
but the ball rotates around the original position of the circle path and doesn't follow the rotating circle(path)
I was thinking I'd need to use onUpdate somehow to lock the rotating circle path to the ball? Any help appreciated
Thanks