Jump to content


DrawSVG - looping stroke animation around circle, slight jump at end of loop

Recommended Posts

Hi! hope you are all well.


I'm creating a loading animation with an SVG.


I have 1 of my 3 lines animating as shown in my codepen, my only slight issue is that when the loop goes from the last step to the first step the stroke jumps slightly, it's only subtle but I wanted to iron this out if possible.


Also, am I right in thinking that I can't have more than one stroke animating on the same element? Basically I am creating something close to this -> https://dribbble.com/shots/5095383-Loader-Animation/attachments/10738727?mode=media


What I have thought about doing is having 3 SVG eclipses in the same position, 1 for each of the 3 lines.


See the Pen BaPMOXX by orionJoe (@orionJoe) on CodePen

Link to comment
Share on other sites

Hiya! Yep, one stroke per shape.

This seems overly complex though. If I were you I'd duplicate the circles and then rotate the group. That'll be easier than having to plan out all the positions for the lines. That way you can control the spin and the expand bits separately with different durations and eases.

Something like this?

See the Pen yLqZwdr by GreenSock (@GreenSock) on CodePen



technically , with hardcoded SVG values you can have as many stroke animations per line as you like.
It's just the stroke being animated so if you put the right numbers in you could make it happen! Not with DrawSVG though, you'd have to target the attribute directly and figure out the numbers yourself! - https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

  • Like 2
Link to comment
Share on other sites

Thanks. I will check that out, I made it like that because in the dribble example I posted I noticed that the stroke always animates in the direction of the rotation, I couldn't think of any other way to do it. My finished animation has 2 rotations, and then each 3 parts are animated also.


I'm sure I can do this with less code, but wanted to get it close to the Dribble example first, maybe the stroke animation can be done with one function, passing it the element and the starting position.


See the Pen yLqZwJE?editors=1010 by orionJoe (@orionJoe) on CodePen

  • Like 2
Link to comment
Share on other sites

This is my take on it:

I'd rotate the outer svg, and use stroke-dasharray for the single strokes.

Timings need to be worked on of course, this was just 5 mins of experimenting.

See the Pen oNMmObW by tobimori (@tobimori) on CodePen

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