Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
WiljeOnline

DrawSVG & Scrollmagic SVG problem

Recommended Posts

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

Link to comment
Share on other sites

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.

:)

 

  • Like 4
Link to comment
Share on other sites

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.

:)

 

  • Like 3
Link to comment
Share on other sites

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! 

  • Like 3
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.
×