@Cassie
Thank you!!
I don't know if you can help me with this tweak, but when I incorporated the path into my larger project, the circle follows the path, but when it reaches the end, it jumps back to its original, beginning spot:
var action = gsap
.timeline({
defaults: { duration: 9 },
scrollTrigger: {
trigger: "#path-pin",
start: "top top",
end: "+=200%",
pin: true,
pinSpacing: true
}
})
.to(".ball01", { duration: 0.01, autoAlpha: 1 })
.from("#path", { drawSVG: 0 }, 0)
.to(
".ball01",
{ motionPath: { path: "#path", align: '#path', alignOrigin: [0.5, 0.5] } },
0
);
How do I make that circle just stay at the end of the svg path once it has followed the path all the way?