Draw line on scroll with DrawSVG Plugin

[Rocha]

Hi there,

I would like to use the DrawSVG Plugin to draw a line as you scroll down/up the page. I worked out the percentage of the page that gets scrolled. I need the animation to start once you get passed the first block so I added the calculations in the JS function on scroll

I have also set the SVG line to 0

gsap.set(pathID, { drawSVG: 0 });

I pass the percentage scrolled value to the drawSVG parameter but it doesn't get triggered for some reason. Does anyone know what's missing?

Thank you

See the Pen ExPVQvJ by rochudo (@rochudo) on CodePen

[GreenSock]

I'm not really sure what you're trying to do, but the logic is definitely off somewhere. I checked my console. and it was attempting to tween from 0 to drawSVG: linePercent: -30000% which of course won't be visible. Sometimes  it was a positive number, often times it was negative.

 

I suspect there's a much easier way to accomplish what you're after, especially with our brand new ScrollTrigger plugin. Have you seen it yet? I'd highly recommend looking into that.

 

Either way, it would be much more efficient to just have ONE tween instance that animates the line from 0 to 100% and then simply set (or animate) the progress() of that tween.

 

But again, I suspect you'll be able to do it with half the code by using ScrollTrigger and it'll save you a lot of headaches. Plus I'd bet it'll perform better. I just don't really know the effect you're after, when exactly you want things to start/end, etc. 

 

Happy tweening!

[Rocha]

I commented out all references to gsap and replaced them for the old JS code I previously had so you can see what I'm trying to achieve. It's now working but I was hoping to accomplish the same effect by using the DrawSVG plugin.

 

I will definitely keep in mind the scrollTrigger plugin for my next project

[ZachSaucier]

Hey Rocha. This is quite straightforward with ScrollTrigger and DrawSVG  

See the Pen mdVegob?editors=0010 by GreenSock (@GreenSock) on CodePen

[Rocha]

I can't believe how easy it is to implement. Thank you very much for that. It does exactly what I need with far less code