Jump to content
GreenSock

cxinaris

Draw svg line on scroll and move circle along the line

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

:)

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

Hi @cxinaris,

 

Welcome to the Club.

 

Here's a slightly different approach

 

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

 

Happy tweening ...

Mikel

 

 

  • Like 3
Link to comment
Share on other sites

  • 1 year later...

Hey @Devang Vala,

 

Welcome to the GreenSock Forum.

 

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

 

Happy tweening ...

Mikel

  • Like 2
Link to comment
Share on other sites

  • 3 months later...

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

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