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

[JoeH 21 Likes (Newbie)]

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

[Cassie 5,129 Likes (Superhero)]

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

 

sidenote

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

[JoeH 21 Likes (Newbie)]

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

[tobimori 14 Likes (Newbie)]

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