Jump to content
Search Community

MorphSVG: Syncing multiple paths to stay connected

garyw test
Moderator Tag

Recommended Posts

I am trying to animate a cable with a plug using MorphSVG. Morphing both the cable and plug as one path gives distorted results, so I separated them.  However, they do not animate together correctly.  How can I sync these animations so that the plug stays on the end of the cable?


I have two more of these types of animations that I need to build.


Please see my codepen.

See the Pen poeEjMM by og-elmonty (@og-elmonty) on CodePen

Link to comment
Share on other sites

55 minutes ago, garyw said:

Morphing both the cable and plug as one path gives distorted results


The cable animation would probably look better if the both paths have the same number of control points.


Keeping the plug in sync with the cable will probably be a little more complicated, and might involve using onUpdate to manually position and rotate it, but maybe someone else has a simpler solution.



  • Like 2
Link to comment
Share on other sites

Yep, I definitely think it'd help to match the quantity of points. Keeping the plug in sync could be a matter of changing the transformOrigin (rotation was throwing you off) and adjusting the x/y: 

See the Pen OJpRxBR?editors=0010 by GreenSock (@GreenSock) on CodePen


(obviously I didn't match the number of points in that CodePen - I was just intending to show you the transformOrigin and coordinate thing). 

  • Like 1
Link to comment
Share on other sites

19 minutes ago, garyw said:

I have made the number of anchor points the same in the start and ending paths


Well, not only anchor points, but bezier control points. See all those v's and h's in the paths. Those are just straight lines.

<path id="cable3" d="M339.5,29.1h0a16.6,16.6,0,0,0-16.7,16.6v84.1a9.6,9.6,0,0,1-9.6,9.6h0a9.6,9.6,0,0,1-9.6-9.6V74.3"/>


You want to have c's in the path because those will be bezier curves that will morph a little smoother. The start path should look similar to this, but of course with different coordinates.


<path id="cable3end" opacity="0.4" d="M44.2,7.5l12.3.4c18.3.4,34.6,10.7,41.4,27.7C113.2,74.4,148,97,184.8,101.1c35.3,3.9,72.6-9.1,96.4-41.3,13.2-19.1,34.9-30.9,58.1-30.7"/>


  • Like 1
Link to comment
Share on other sites

You're just going to have play around with it until you find the right look. You can also add in intermediate steps to help, like with keyframes.


gsap.to('#cable3', {
  keyframes: [
    {morphSVG: { shape:'#path1' }},
    {morphSVG: { shape:'#path2' }},
  	{morphSVG: { shape:'#path3' }},


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