Jump to content

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

SVG line drawing

Recommended Posts

Hi guys,


I am sharing a very close example to my current work which I am doing with GSAP using ScrollTrigger, DrawSVGPlugin, MotionPathPlugin. When you scroll down you will see a SVG line drawing there which is going fine but just when you reach half way on Section 9, you will notice that the SVG line goes on drawing before reaching next section. In other words, it draws ahead of the scrolled section. Also, when I scroll up and down, the entire line starts shaking.

I am stuck on these 2 issues. Can anyone please help me solve this?


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

Link to post
Share on other sites

Hey @Varunbht,


As mentioned in this thread



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!).


Here quick modification of your case


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


Happy scrolling ...


  • Like 4
  • Thanks 1
Link to post
Share on other sites

Thank you so much @mikel.


I was having a big trouble solving these issues.

Link to post
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.