Jump to content


Hulk smash

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

Greetings everyone, 

I was able to morph from one path to another

See the Pen mQxYOG by kravmaguy (@kravmaguy) on CodePen

however what is the proper technique to use when there is not a 1:1 ratio,

for example, in the attached pen (in the subject line) you can see I am morphing the man into the hulk, but the man is composed of many paths that I painted out in illustrator, as you can see its very slow, and they are all morphing into the same path.. 


As well you see that the svg is cropped by the viewbox, and I am having some trouble fixing it..

what is the method to work with morph when the ration is not 1:1, i guess if its only a few paths the user might not notice, however in this case you can see it just looks weird. 

what I am thinking of doing for this project is cutting down the amount of paths on the man, to say 10-15, and then have the paths on the man morph into different svg skin textures on the hulk, and then afterwards fade into something like a rastor image.. something similar to what guy so expertly did: 

See the Pen rawkK by indyplanets (@indyplanets) on CodePen


** disclaimer: I will not be the designer on the project I will just be implementing the code, so what should I ask the designer to do? 

See the Pen RqJmgj by kravmaguy (@kravmaguy) on CodePen

Edited by greykrav
adding information
Link to comment
Share on other sites

Hi @greykrav,


The SVG looks a bit strange ...

The position of the morph aligns with the source object.
In this pen only one path is selected as the starting object and it is set  200px down and the rest of the MAN will be hidden.

Plus: SVG overflow:visible;


See the Pen MZWmMZ by mikeK (@mikeK) on CodePen


Does this help?

  • Like 1
Link to comment
Share on other sites

Yeah, you can only morph one path (shape) into another - not a bunch of paths into one path. The solution @mikel offered looks pretty good; alternatively, you could combine their shapes into one outline, cross-fade them, and just morph that one thing into hulk, like this: 

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


Does that help at all? Or were you asking how to adjust the artwork so the "man" and the "hulk" are both similar sizes? If so, that'd be easiest by just editing the original artwork. 


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