Jump to content
Search Community

can't get to morphSVG and stay in the same place

caemostajo test
Moderator Tag

Go to solution Solved by PointC,

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

Hi tweeners!

I'm sure this is an easy one due to the skill level of GreenSock members    :mrgreen: 

there are 3 svg's in the pen, the last svg (#dot) tweens morphSVG to the 2 svg (#brush), the thing is that it morphs and goes to another coordinates... way to far. 

How to morphSVG a multipath SVG (#brush) and stay in the same place.

THX!!!    :blink:

See the Pen RrEMav by caemostajo (@caemostajo) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi caemostajo :)


Looks like you're having some fun starting to use the morph plugin. 


Your pen is using three different SVGs of varying sizes which is causing some issues here. You can certainly use paths in separate SVGs, but I personally prefer to use one SVG with multiple paths to get the easiest and best results. 


I also see two morphs happening at once and I wasn't sure if that was your desired outcome. Is the #axe supposed to morph into the #dot and then into the #brush? I assume that's what you wanted as you mentioned multi-path in your question.


I'd recommend creating a single SVG and put your paths at the desired ending point even if they overlap or sit on top of each other. Then, when you are ready to morph, you set the visibility of the path(s) to which you're morphing - visibility:hidden. This allows your starting path to remain visible and take on the shape and position of the morph path(s)


I have a demo pen that shows a triangle, square and circle all morphing while jumping here:

See the Pen yejGvb by PointC (@PointC) on CodePen


To see how the paths all sit on top of each other,  just delete line 11 of my CSS and play the animation. 


Hopefully this makes sense and helps a little bit.


Happy morphing. 


  • Like 6
Link to comment
Share on other sites

  • Solution

Carl & Jonathan - thanks very much for the kind words. :)




I've made another pen to help you understand this behavior a bit better. There are two timelines and two SVGs that are nearly identical. The first one has a shape in each corner and you can see the morph target not only assumes the shape, but the positioning of the new path.


The second one is the same except all paths are centered so you get a morph with no position changes. 


I've also added a toggle so you can see the silhouette of the morph paths that the square is changing into.

See the Pen LGMaoa by PointC (@PointC) on CodePen


Hopefully that helps you with a further understanding of what's happening with the paths.


Happy morphing. 


  • Like 5
Link to comment
Share on other sites

You guys are awesome! thank you so much !! Craig you've been really kind and helpfull in all my posts... really appreciate that

putting all the paths in a single svg and working them on illustrator was the solution... paths on inkscape have to many transforms and blah and bleh on its code, illustrator keeps it so simple, love it

really excited with gsap, its giving life to everything!    :-o

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