Jump to content
Search Community

How to animate arc along svg circle path smoothly?

autumn test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

I have learned from the doc that how can I animate rect along path. For advance, how can I make the arc-shaped element(id="pin-arc" in the codepen demo) move around the circle path, and always fits to the circle radian?
Is this possible with only MotionPathPlugin?

Or are there any other solution for this, (yet prefer not to includes other plugins).

Thank ahead!

See the Pen dyaKJPE by cc5324 (@cc5324) on CodePen

Link to comment
Share on other sites

Yes, I am trying to make the grey arc act the same as the red one!

 

Your solution does help! Thank you!

 

But now the grey arc is a little away from the circle path,

Is it possible to make the grey arc exactly move along the path of circle (cover on it)?

Thanks again!

Link to comment
Share on other sites

  • Solution

For circles and arcs, I find it easier to clone the original circle path, show a section of it and simply rotate around its center. Super simple with the drawSVG plugin.

 

See the Pen a33f6c2d7e7fa58d1c50e59a4f3ea24e by PointC (@PointC) on CodePen

 

You can also use the pathLength = "1" trick and achieve the same result without the plugin.

See the Pen f9214e6d849c0bec87e065008e4b855e by PointC (@PointC) on CodePen

 

Just my two cents, Happy tweening.

:)

  • Like 4
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...