Sangam Basnet

Many thanks Mikel. You are awesome. 5 Star for your work and reply. Regards, Sangam Basnet

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

Hi Mikel, I was trying to reply since after your reply but had page error, happy to see it running. Yes now the line appears after deleting the last tween, many thanks. Here is the attachment of arrow that I am looking for to work on. Sorry the upload attachment didn't seem to work on previous reply.

Hi Mikel, Thank your for the quick reply. Just few more things: - Can the arrow be like in the attached file below? - In your reply, when I checked on codepen the arrow moves forward and at the end the line gets omitted, I want the line with arrow to be there after animation with the different arrow, like the one I have attached here with. Is it possible please?

Hi, Can anyone help me with the arrow that should be appear attached in front of the circular progress bar. Is it even possible? The attached image arrow is just a sketch so disregard the irregularities in image of arrow, however I want the arrow exactly in same place. Hope to hear from forum and expert soon. I need to reply to my client urgently Thank you.