stroke cap arrow in starting of circular progress bar

[Sangam Basnet]

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.

 

[mikel]

Hey @Sangam Basnet,

 

Welcome to the GreenSock Forum.

 

It could run like this

 

See the Pen OJPzPGo by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

 

[Sangam Basnet]

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?

 

[mikel]

Hey Sangam Basnet,

 

Where is the attachment?

If you delete the last tween then the line will not disappear.

 

Kind regards

Mikel

[Sangam Basnet]

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.

 

 

[mikel]

Hey @Sangam Basnet,

 

Another arrow is now in the SVG, hidden in CSS.
Then simply hide or show the arrows with 'autoAlpha'.

 

See the Pen GRgyMRd by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

 

[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  

[mikel]

Hey @Sangam Basnet,

 

Here is an option. Pay attention to the new structure.

 

See the Pen QWwQagQ by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

 

[Sangam Basnet]

Many thanks Mikel. You are awesome. 

5 Star for your work and reply.

 

Regards,

Sangam Basnet