DrawSVG & Scrollmagic SVG problem

[WiljeOnline 3 Likes (Newbie)]

Hi there, 

 

I got a weird issue. Somehow, my SVG path is appearing outside the SVG scope. Could be my messy javascript (if anyone has tips on how to do it cleaner, please). The SVG in the yellow box should be right in the center. Anyone know how to fix this? 

 

Thanks!

See the Pen OoaNmz by wiljeonline (@wiljeonline) on CodePen

[PointC 8,599 Likes (Superhero)]

HI @WiljeOnline 

 

Welcome to the forum.

 

Your SVG is centered in that block, but your path is drawn far outside the bounds. I added a simple rectangle to the second SVG to show that it is indeed centered as it should be. To solve the path problem I just added this line:

 

TweenMax.set("#path3", {x:-348, y:-215});

 

Here's a fork of your pen.

 

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

Hopefully that helps. Happy tweening and welcome aboard.

 

[PointC 8,599 Likes (Superhero)]

PS Since you're a Club member, I'd also recommend using DrawSVG for this effect rather than calculating the path length and animating the dashoffset manually like that. It'll make your life a whole lot easier. 

 

Happy tweening.

 

[WiljeOnline 3 Likes (Newbie)]

7 hours ago, PointC said:

PS Since you're a Club member, I'd also recommend using DrawSVG for this effect rather than calculating the path length and animating the dashoffset manually like that. It'll make your life a whole lot easier. 

 

Happy tweening.

 

 

You're actually right. I still have to dive into DrawSVG, so I might do that right now. Thanks a lot!