Jump to content


Animate path on scroll - Path seems to be animating too quickly and is almost always out of view.

Recommended Posts

Hello everyone,


So I'm animating an SVG path, however I believe the animation is going too quickly and so the user only sees the very beginning and end of the line being drawn. I would like the end of the SVG path to always be in the centre of the screen, so that the user can see it being drawn. I've tried adjusting the trigger start and end points with no luck. I've also tried adjusting the duration with no luck.


Any help would be greatly appreciated,





See the Pen mdXyWKd by shaun-will (@shaun-will) on CodePen

Link to comment
Share on other sites

Hi Shaun,


That's a tricky a situation if you think about. You are trying to match up the progress of a curve, your SVG, to something linear, the scroll position. It's nearly impossible to work unless you manipulate the SVG container so it stays centered, kind of like what @mikel did here. DrawSVG should matchup with the motion path so it should stay in sync.


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



  • Like 3
Link to comment
Share on other sites

Hi Blake,


Thanks for getting back to me. That's a great example, thank you. I think I could have some design issues though if the SVG container is moving, as its position in relation to the elements behind it are important to the project in question.


The project as it stands as 11 SVG paths that are animated throughout the site, going from top to bottom. They weave over and behind other elements. Some of them work perfectly, and some of them don't. I'm wondering if it's the shorter SVGs that are more manageable.


Kind regards,



Link to comment
Share on other sites

Yeah, I don't know how you would do that. I'm sure it's possible with a bunch of math, but that's way beyond the scope of this forum. 


Maybe someone else will chime in with a better idea on how to pull something like that off without moving the paths.

Link to comment
Share on other sites

Yeah, it's probably doable by plotting a CustomEase but that'd be a lot of effort to figure out an algorithm to build that out. Way beyond the scope of help we can provide in these forums for free. You're welcome to contact us about paid consulting services or post in the "Jobs & Freelance" forum. 


Good luck!

Link to comment
Share on other sites

Hi everyone, thank you for your replies! 


@PointC Wow, that's brilliant. I hadn't seen that before, but glad you've pointed it out to me. Thank you. I'm doing a similar thing, I guess. (Albeit a lot less complicated).




  • Like 1
Link to comment
Share on other sites

Happy to help. Please post back when you finish the project. I'd love to see it. :) 

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.