"Draw" dashed line on scroll with an image

[mizzle]

I want to "draw" a dashed line down a page on scroll, led by an image. I found this codepen in the forums that has the on-scroll functionality and the image functionality, but it doesn't have the line appearing on scroll:

 

See the Pen MWPOQmo by GreenSock (@GreenSock) on CodePen

 

This has the desired "drawing" effect led by a graphic that keeps its direction along the path, but the graphic is another path shape instead of an image, it's not on scroll, and the additional zooming-in animations are unnecessary for what I'm looking for:

 

See the Pen c07761a17f94434f1229e11e798f1a3d by PointC (@PointC) on CodePen

 

I found a non-GSAP codepen for drawing a dashed line on scroll that's similar to what I want, but as far as I can tell there is no way to add an image as the "lead" to the path: 

 

See the Pen MMBxMV by w3programmings (@w3programmings) on CodePen

 

Is there a way to combine all these things and get the desired result of an image "leading" a dotted path on scroll?

 

See the Pen NWEaxew by mmizzle (@mmizzle) on CodePen

[GSAP Helper]

Hi @mizzle. Nice job finding those various CodePen demos. 

 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "here is my list of requirements...please show me how to build it" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

I'd recommend that you give it a shot and then if you get stuck, post back here with a minimal demo. Maybe start with just drawing the dotted line, then connect that to scroll.

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[Cassie]

Steps I would suggest!

1) Make a simple motion path animation using an image
https://greensock.com/docs/v3/Plugins/MotionPathPlugin

2) After you have done that try drawing that line in with drawSVG
https://greensock.com/docs/v3/Plugins/DrawSVGPlugin

3) When you understand those pieces, take a look at the markup in this demo, it's using masking to show a dotted path - you can refactor your drawSVG path to mask the dotted line

See the Pen c07761a17f94434f1229e11e798f1a3d by PointC (@PointC) on CodePen

 

4) When all those pieces are working nicely together, add the scrolling, depending on the functionality you need, this could be as simple as one line of scrolltrigger code, or some more complex custom logic.
https://greensock.com/docs/v3/Plugins/ScrollTrigger

For the dashed line, we covered that in this video, it may be helpful!

I think you've got more than enough resources here to give it a go. Shout if you get stuck and we'll see if we can nudge you along.

You could also try and edit one of the pens you've linked to but I've found that without proper understanding, that can get muddly and it's often best to just start from scratch and refer to other pens/docs for guidance.

[mizzle]

2 hours ago, Cassie said:

Steps I would suggest!

1) Make a simple motion path animation using an image
https://greensock.com/docs/v3/Plugins/MotionPathPlugin

2) After you have done that try drawing that line in with drawSVG
https://greensock.com/docs/v3/Plugins/DrawSVGPlugin

3) When you understand those pieces, take a look at the markup in this demo, it's using masking to show a dotted path - you can refactor your drawSVG path to mask the dotted line

 

 

4) When all those pieces are working nicely together, add the scrolling, depending on the functionality you need, this could be as simple as one line of scrolltrigger code, or some more complex custom logic.
https://greensock.com/docs/v3/Plugins/ScrollTrigger

For the dashed line, we covered that in this video, it may be helpful!

I think you've got more than enough resources here to give it a go. Shout if you get stuck and we'll see if we can nudge you along.

You could also try and edit one of the pens you've linked to but I've found that without proper understanding, that can get muddly and it's often best to just start from scratch and refer to other pens/docs for guidance.

 

Getting this guidance has been really helpful, thank you!

 

I managed something close to what I want (the last CodePen in my original post), but I'm so unfamiliar with GSAP settings that I can't figure out how to synch the line and the image. One always ends up moving past and moving faster than the other. Is there documentation for settings that can be adjusted so I can lock those together better?

[Cassie]

Sure thing,

 

Here you go, using a timeline is helpful, the main issue you had was that you were using different eases and start positions.

 

You need both tweens to start at the same time, end at the same time and have the same easing in order to be in synch.

 

See the Pen ExOwQLV?editors=1010 by GreenSock (@GreenSock) on CodePen