Jump to content
Search Community

stroke cap arrow in starting of circular progress bar

Sangam Basnet test
Moderator Tag

Recommended Posts

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.

 

arrow_infront_of_progressbar.png

Link to comment
Share on other sites

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? :)

 

Link to comment
Share on other sites

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.

 

 

arrow-right.png

Link to comment
Share on other sites

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 :) 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...