Jump to content


Morph SVG Groups

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



I was wondering if there is the possibility to morph groups instead of single paths?


Let's say I have two images/groups.

Each image consists out of 30-50 paths, organized in two groups (one for each image).


Now I would like to morph the first image (therefore group) to the second image (therefore second group).

Is there a shortcut or do I have to morph any single path by it's own?





  • Like 1
Link to comment
Share on other sites

Hi and welcome to the forums,


Thanks for the question. MorphSVG can only morph a path to a path. There is no support for groups <g>. It sounds like you are going to need to convert items in group 1 to a path that you specifically morph to a path in group 2.

Link to comment
Share on other sites

Thanks for your reply!

If I convert group 1 into a path it's isn't possible to define different background for each element, isn't it?


Group 1 consists of many triangles - each has an different color. Combined together they appear as an object.


What would be the most elegant way to morph on of these "triangle-objects" into another?


Thanks a lot!

Link to comment
Share on other sites

Hi Clms  :)


You're right - converting multiple paths into one will result in fill color change difficulties.


I'd recommend just going the brute force route and have a tween for each startPath to each endPath. You'd then end up with:

.to("#startPath1", 1, { morphSVG:"#endPath1", fill:"newFillColorIfNeeded" })
.to("#startPath2", 1, { morphSVG:"#endPath2", fill:"newFillColorIfNeeded" },0)
// and so on

You mentioned 30-50 paths so it isn't really that many lines of code. This method will give you the most control over all aspects of the morph. You can control the start and end fill colors of each piece, stagger the morph time of each piece and control easing for each individual morph if so desired.


By grouping the start paths, you can also control it as one piece too. This is a pen I made in answer to another forum question, but it shows the basic idea:

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


Hopefully that helps a bit.


Happy morphing.


  • Like 6
Link to comment
Share on other sites

Nice work, PointC. 


And yeah, we can't really make MorphSVGPlugin handle arbitrary <g> groups because:

  1. It'd violate the overwrite model. What if you start morphing a <g> that contains a <rect> that you then try to morph part-way through the other morph? In other words, the targets wouldn't be segregated properly. 
  2. It'd introduce a lot more processing to figure out which parts of the <g> map to which parts in the other <g>. We do already have a lot of that logic in there for handling multi-segment paths, but if we also have to accommodate entirely different elements, it just makes it that much more complicated and slows things down. 
  3. It'd get even more complicated because entirely different properties would have to get involved, like fill color, stroke width, etc. You'd no longer be tweening purely the shape ("d" attribute) - you'd be tweening a ton of other things potentially. Calculations would likely skyrocket. 

Technically a function could be built to automate most (if not all) of that. For example, you feed in 2 <g> elements and it loops through the children, maps them to each other properly and creates 1 morphSVG tween for each one. But if you have mis-matching quantities, it gets a bit awkward (though possible to work around by fabricating elements with no width or height). Again, not exactly simple, but possible. PointC's suggestion is probably best at this point unless you're feeling particularly ambitious :) 

  • Like 1
Link to comment
Share on other sites

Great info Jack. I can imagine a group to group morph would be a crazy complicated undertaking.


This plugin is so incredible and my absolute favorite.


I'm still trying to put my brain back together after my mind was blown the first time I saw it.  :-o  :-D

  • Like 2
Link to comment
Share on other sites

  • 4 months later...

It sounds like you are going to need to convert items in group 1 to a path that you specifically morph to a path in group 2.


Sorry for the total Illustrator noob question. How would one accomplish this task?



I created a new topic for this question. Please ignore here.

Edited by Nickzilla
Link to comment
Share on other sites

I'd like to morph a SVG being used as a border image. How might I achieve that?

If I load an SVG in CSS or JS using "url(mysvg.svg)" how do I grab it to use with MorphSVG?

Link to comment
Share on other sites

Hi asherritt,


If you can not use inline svgs then you should load them using one of the methods Blake suggests here:



If you are using SVG as a background image then there are limitations. This is a great post:


  • Like 3
Link to comment
Share on other sites

  • 7 months later...

Assuming all the paths are in the same order for both group elements you're wanting to morph from/to, you could loop through the children of the group element like this... This is intended for paths only.

var TL = new TimelineLite();
var pathsBefore = document.getElementById("g-before").children,
    pathsAfter = document.getElementById("g-after").children;
for (var i=0; i < pathsBefore.length; ++i) {
    TL.to(pathsBefore[i], 1, {
        morphSVG: pathsAfter[i]
    }, 0)
  • Like 5
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.