Jump to content

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

Trouble with pathDataToBezier

Recommended Posts

Hey everyone,


I have been messing around with this all weekend and I am starting to think I am missing something extremely silly.  I used Adobe Illustrator to create the curve you see in the background of the pen.  I was thinking I could easily turn it into my motion path for my circles and have all 3 circles start at the bottom of the curve and then work their way up the path and end with 3 different left positions.   


I hope I explained it well and if I didnt please let me know what clarifications I can make to help illustrate the idea.


Any help would be much appreciated!

See the Pen XOGdrr by afro523 (@afro523) on CodePen

Link to comment
Share on other sites

Thanks for the demo. 


Things are much much easier if your dots are actual circles or shapes inside your SVG.


Since they are divs outside your SVG you need to make sure you can work in a way that the coordinates translate well.

I simplified things as best I could to show you this working in general.


In this case its important to give your SVG a width and height AND also set the svg's position to absolute.

Your divs were starting on the page BELOW the SVG. There's no way for MorphSVG to know where things outside the SVG are.

Also I didn't really get why you were also tweening the top and left.... unless your intention is to move those things away from the path.


hopefully this demo gives you a better starting point


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


  • Like 2
Link to comment
Share on other sites

Hey Carl,


Thank you so much for the quick response, it is very helpful.  I wish I could make the circle inside the SVG I know that would make everything a lot neater and easier to use, unfortunately it is not an option? 


The idea behind why I am tweening the top and left is that ideally I want each circle at a different position (different x same y) after following the curve. Top is calculated by windowHeight / 4 and Left is something similar using the index in the for loop.


I have added an image trying to depict the idea I am going for.  The red ball is the starting point for all 3 circles, they then take the path and end up where the 3 black circles are.


I have known values for where I want the circle to start and end while taking this kind of path.  I am starting to wonder, am I using the wrong tool for this kind of idea?


Asset 1.svg

Link to comment
Share on other sites

Does it have to follow that EXACT path or are you just trying to make them all kind curve in that general shape as they move? You could just do a stagger with a cycle, and leverage BezierPlugin's "thru" mode. This example makes them all follow the same initial curve and then the last part is what's different, like your graphic: 


See the Pen 9fe1e5903087d6b76bf15395fe37ed28 by GreenSock (@GreenSock) on CodePen


Does that help? 


  • Like 5
Link to comment
Share on other sites

That is exactly what I was looking for, thank you so much Jack!  I was without a doubt using the wrong tool for the job at hand.

  • Like 2
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.