I did replace with the anotherArrow:
changed this to:
gsap.set("#anotherArrow", {position:'absolute', x:10, y:10, xPercent: -50, yPercent:-50, scale:1.5, transformOrigin:"50% 50%"});
Here:
.to("#anotherArrow", {
duration: 3,
ease: "none",
motionPath:{
path: "#circle",
autoRotate: -90,
align: "self",
type:"thru"
}
Deleted this:
.set("#arrow", {autoAlpha:0})
anotherArrow alpha setting as below:
.set("#anotherArrow", {autoAlpha:1})
But it didn't work as I wished. The red arrow is visible but when the line runs on circular path it doesn't appear. Am I missing something? Please correct me.
Thank you for the help so far