garyw Posted May 17, 2021 Share Posted May 17, 2021 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 More sharing options...
OSUblake Posted May 17, 2021 Share Posted May 17, 2021 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. 2 Link to comment Share on other sites More sharing options...
GreenSock Posted May 18, 2021 Share Posted May 18, 2021 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). 1 Link to comment Share on other sites More sharing options...
garyw Posted May 18, 2021 Author Share Posted May 18, 2021 Thank you both for your help. I have made the number of anchor points the same in the start and ending paths. It really helps, except with this one: See the Pen dyvOyKX by og-elmonty (@og-elmonty) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted May 18, 2021 Share Posted May 18, 2021 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"/> 1 Link to comment Share on other sites More sharing options...
garyw Posted May 18, 2021 Author Share Posted May 18, 2021 I removed all the v's and h's and I am still getting sharp bends: See the Pen dyvOyKX by og-elmonty (@og-elmonty) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted May 18, 2021 Share Posted May 18, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now