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

[Shaun09075]

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,

 

Thanks,

Shaun

 

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

[OSUblake]

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

 

 

[Shaun09075]

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,

 

Shaun

[OSUblake]

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.

[GreenSock]

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!

[PointC]

That's a pretty tricky animation to get right. You've probably seen the cool Lemonade line drawing page.

https://www.lemonade.com/giveback-2019

 

@Trapti recently did a super job at recreating that animation. It's worth taking at a look at what she did here:

https://b2mg4r.csb.app/

 

Happy tweening.

  

[Shaun09075]

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

 

Cheers!

 

[PointC]

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