Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sangam Basnet

stroke cap arrow in starting of circular progress bar

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

Share this post


Link to post
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? :)

 

Share this post


Link to post
Share on other sites

Hey Sangam Basnet,

 

Where is the attachment?

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

 

Kind regards

Mikel

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

 

  • Like 1

Share this post


Link to post
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 :) 

Share this post


Link to post
Share on other sites

Many thanks Mikel. You are awesome. 

5 Star for your work and reply.

 

Regards,

Sangam Basnet

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×