Scroll Animation with ScrollTrigger, DrawSVGPlugin, MotionPathPlugin

[Varunbht]

Hi guys!

 

I tried to draw an svg path on scroll with these three plugins: ScrollTrigger, DrawSVGPlugin, MotionPathPlugin.

I did it but I really can't understand why it is drawing in reverse order.

When you scroll down more than 30-35%, you will see a red ball drawing a line, but it should start from the top not from the bottom.

I don't know if the problem is with line, css or any other thing.

 

Can someone please help me with this. I really don't know how to fix it.

 

@GreenSock

See the Pen eYZJwKW by Swooshant (@Swooshant) on CodePen

[ZachSaucier]

Hey Varunbht. This is simply because you created your path in a way that makes it start from the bottom and go to the top  It'd probably be best for you to reverse the direction in a vector editor. But if you don't want to do that you could reverse the DrawSVG and MotionPath values to get it working:

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

[Varunbht]

Hi @ZachSaucier,

Thank you so much for your help.
Yes, the line is moving in the right direction now. However, I see 2 issues that I would request your inputs on. Firstly, the ball is little ahead of line, I want to keep it at the end of the line. Secondly, when I scroll a little ball isn’t visible and line drawing speed is very fast.

[ZachSaucier]

8 hours ago, Varunbht said:

the ball is little ahead of line, I want to keep it at the end of the line.

You can use MotionPath's align and offset to position it wherever you'd like.

 

8 hours ago, Varunbht said:

when I scroll a little ball isn’t visible and line drawing speed is very fast.

That's not a GSAP issue, that has to do with how far the ball/drawing needs to go paired with how long of scrolling you have to do it. You can adjust the CSS to make the SVG smaller, adjust the path to have less distance, adjust the start and end positions of the ScrollTrigger, and other similar things to get it working the way that you want it to work. We can't do that part for you.

[mikel]

Hey @Varunbht,

 

To compensate for the 'faster' vertical movement, a logic could be defined that counteracts the position of the SVG.

Here is a simple experiment adapted to certain sectors (a fixed width of the SVG!).

See better with a larger window height.

 

See the Pen XWdwdeR by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[Varunbht]

Thank you so much again @mikel, @ZachSaucier

I was able to solve the problem and (almost) complete the project with your help. There’s just one more thing that I am stuck at and haven’t been able to figure out since 2-3 days. Could you please help me one last time please? I just want to understand how can I control the amount of pixels to be drawn on a single scroll? For 90% of the distance, the line and scroll move perfectly in sync but then suddenly the line moves ahead and breaks the flow. Can you suggest how to correct it? It’ll help me close the project!

[ZachSaucier]

There's nothing special to it. The timing is just determined by the distance to be moved, the distance of the ScrollTrigger, and your easing. You just have to play with those values until you get what you want.