Jump to content
Search Community

Draw svg line on scroll and move circle along the line

cxinaris test
Moderator Tag

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

  • 1 year later...
  • 3 months later...
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

  • 2 years later...

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.
×
×
  • Create New...