Draw svg line on scroll and move circle along the line

[cxinaris]

Hello,

 

I found out about Greensock some days ago and immediately started using it. I think is really cool but I have some issues with some specific tasks.

 

I am trying to:

- Draw an svg line in portions as you scroll. (using also scrollmagic here)

- Have a circle that will follow the svg line as it draws.

(If I manage to do this, then I want multiple circles in a group follow the line as it's being drawn).

 

From my codepen you will see not a perfect way to draw the line which I think I can make it better but my main issue is with the circle follow the svg.

As a first step, I am just trying to follow the SVG (not the line as it's being drawn) but using the MorphSVGPlugin.pathDataToBezier to get the path of the svg, the return path does not really follow the svg.

 

I think maybe my SVG needs more points so that the bezier path is more accurate but I am not sure if this is the case here.

 

Also I would like to know for ideas if I am thinking this solution completely wrong and there is an easier way to accomplish what I need.

 

Thank you,  

See the Pen JqKoaO by xinaris (@xinaris) on CodePen.

[PointC]

Hi @cxinaris,

 

Welcome to the forum and thanks for joining Club GreenSock.

 

You'll usually want the target SVG element inside the same SVG as the motion path. This makes the whole thing size together and causes less headaches. You were also missing one script that allows ScrollMagic to hijack the tweens.

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script>

 

I made a fork of your demo and stripped out all the extra parts that were not relevant to the question. You'll see that the line and target circle are part of the same timeline so they animate together as you scroll. I set the duration to the height of the SVG. In my fork, that value is set on load. You'll need to add a resize listener and make some adjustments to make this all truly responsive, but this should get you started.

 

See the Pen WBxoow by PointC (@PointC) on CodePen.

 

Hopefully that helps. Happy tweening and welcome aboard.

 

[cxinaris]

Hi @PointC

 

Thank you very much for your effort. I think also this is a very good start to make it work as I need.

[mikel]

Hi @cxinaris,

 

Welcome to the Club.

 

Here's a slightly different approach

 

See the Pen QREjpr by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

 

 

[cxinaris]

Thank you @mikel for you input.

[Devang Vala]

the code is not working please help me fast

 

[mikel]

Hey @Devang Vala,

 

Welcome to the GreenSock Forum.

 

Which code? Where is your case? Please show it in a CodePen.

 

Happy tweening ...

Mikel

[Renatomagico]

Hi. 
I have an image with a drawing of a zigzag road. I would like to create the effect of an element that fills the path with the scroll of the page. Do you think it is possible to do it?

[Renatomagico]

I need to create a line that makes such a path. How can I do it?

[Renatomagico]

On 5/11/2019 at 8:19 PM, mikel said:

Hi @cxinaris,

 

Welcome to the Club.

 

Here's a slightly different approach

 

 

 

 

Happy tweening ...

Mikel

 

 

This is very similar to what I'm looking for! Can you help me with the procedure to make it happen?

[ZachSaucier]

1 hour ago, Renatomagico said:

I would like to create the effect of an element that fills the path with the scroll of the page. Do you think it is possible to do it?

Most definitely. There are several examples of that in the ScrollTrigger demos listing.

 

2 minutes ago, Renatomagico said:

I need to create a line that makes such a path. How can I do it?

Use a vector editor  

[Renatomagico]

2 minutes ago, ZachSaucier said:

Most definitely. There are several examples of that in the ScrollTrigger demos listing.

oh thank you so mutch.  what can i start drawing the path? is there a tutorial?

i see this exemple 

See the Pen GRoXzYj by GreenSock (@GreenSock) on CodePen.

[ZachSaucier]

9 minutes ago, Renatomagico said:

is there a tutorial?

The closest thing to one that I'm aware of is this post by @PointC. Besides that, the demos of the effect give you the code so you should be able to break down what they're doing.

[Renatomagico]

As soon as I'm ready with the page, I post it here with codepen. So look at the code. Thanks so much

[Bharath Kumar A]

On 2/3/2021 at 7:45 PM, Renatomagico said:

I need to create a line that makes such a path. How can I do it?

How can we do achieve this curved lines?

[Rodrigo]

Hi @Bharath Kumar A and welcome to the GreenSock forums!

 

This example, that uses the Motion Path Plugin and the Draw SVG Plugin might help you getting started:

 

See the Pen rNOBLBV by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps.

Happy Tweening!