Another little Draw SVG issue :(

[smallio]

So here is my intro animation in CSS.

 

 

See the Pen zRxPyv?editors=0100 by smallio (@smallio) on CodePen

 

I'm trying to re-do this in Greenock so I can chain it to the rest of my site but it's not animating again. Pretty sure It's just something small. This time I've drawn the circles with the SVG circle properties, vs in illustrator... I thought ahh nice and easy... Wrong lol.

 

See the Pen rJapOe by smallio (@smallio) on CodePen

 

I've tried to follow this pen & I can't really see what I'm doing wrong.

 

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

 

Could someone point me in the right direction please?

 

Many thanks,
Smallio

[Carl]

You had a few issues:

 

1: the url you used for DrawSVG was kind of messed up.

 

2: your svg code was malformed in multiple places where you were setting the class attribute (missing =)

 

 <circle class"ring1" ../>

 

should be

 

<circle class="ring" .../>

 

3: you were sending class values in document.getElementById()

 

var ring1 = document.getElementById(".ring1")

 

should be

 

var ring1 = document.querySelector(".ring1"),

 

4: Your stroke always had no length which makes it impossible to see. When you set drawSVG:0 that means the beginning and end of stroke are both at 0 and there is no stroke to see (it has no length). If you tween to drawSVG:"100% 100%" that means the beginning and end of the stroke are both at 100%, again, meaning there is not stroke to see.

 

You need to make sure that at some part of the animation the beginning and end aren't the same so that you can see some of the stroke.

 

 

I made some changes so that you can see some of the animation. Feel free to tweak the values as you see fit:

 

See the Pen KQwoRJ?editors=1010 by GreenSock (@GreenSock) on CodePen

 

 

 

[PointC]

Looks like @Carl beat me to it. There were some corrections needed there. 

 

For my two cent opinion, I'd add that you could also achieve an animation like that by simply staggering the rotation of the circles. Something like this:

 

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

 

Happy tweening.

 

[smallio]

@Carl @PointC

 

What fantastic explanations, thank you guys once again

 

A few questions:

 

1) Is there a particular way you guys like to scan your code for little errors like that? I quite often make little typos that effect the whole code & although the base idea is right, I can spend ages trying to find the fly in my drink. 

 

2) How do you suggest hosting files & what properties do they need? I've bought shockingly green () and uploaded my whole package to s3. I'm trying to use my files vs random ones I find on codepen. Unfortunately they don't work ATM. Do I need to set them to public/other specific settings?

 

Pen related questions:

 

1) So I've tweaked both versions & they both work beautifully. What @Carl said makes sense & I like the shorthand method you've done as well @PointC. For this loader I'm going to use Carls as it was basically my code minus the typos and a few other things but thank you none the less! Here's what I have so far.

 

See the Pen eVmKze?editors=1010 by smallio (@smallio) on CodePen

 

 

What would be the process of making each line start pulling back as soon as it meets it's self like this one here?  I see you have used functions but how would I stagger each line in the function & make it a fluid animation so it does not have a jerky start and end? Always wanted to know how to do this for these kinds of animations.

 

See the Pen doXdbj?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Thanks guys, you rock.

[smallio]

Nearly there, not sure what's causing this weird glitch effect though!

 

See the Pen mXyGyx?editors=1010 by smallio (@smallio) on CodePen

[PointC]

I'm not 100% sure what you want the animation to do. The 1st demo you posted has some half circles rotating back and forth, but you also mentioned Carl's demo that draws from 0,0 --> 0,100 --> 100,100. Is this what you're trying to do?

 

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

 

Or were you wanting the lines to yoyo like this:

 

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

Hopefully those point you in the right direction.

 

Happy tweening.

 

[smallio]

38 minutes ago, PointC said:

I'm not 100% sure what you want the animation to do. The 1st demo you posted has some half circles rotating back and forth, but you also mentioned Carl's demo that draws from 0,0 --> 0,100 --> 100,100. Is this what you're trying to do?

 

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

 

Or were you wanting the lines to yoyo like this:

 

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

Hopefully those point you in the right direction.

 

Happy tweening.

 

 

Ah you're the best! 

 

I was just curious to see how it would be done. You've more then answered that, aha. Thank you <3

 

Both look awesome