Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
cxinaris

Draw svg line on scroll and move circle along the line

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

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