Animate dynamicly generated svg on horizontal scroll

[hastalavistababy]

Hi,

I want draw svg path on page load, like this:

 

 

and on scroll want to move another filled path on the drawed svg, like this:

 

Please help.

 

 

OPEN CODEPEN ON FULLSCREEN MODE

See the Pen rNJaypJ by Hastalavistababy (@Hastalavistababy) on CodePen

[GreenSock]

Sure, that sounds like something you could use DrawSVGPlugin for (a members-only plugin of Club GreenSock). You can try it out for free on CodePen. See

 

I'd recommend just focusing on getting your animation right first, and THEN hook it up to the scroll position with ScrollTrigger. 

 

Go ahead and give it a try and if you have GSAP-specific questions post back here with a minimal demo. Good luck!