Jump to content


Reduced scale after morphing

Go to solution Solved by GreenSock,

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

First off let me say that I love GSAP! This is a great plugin and I'm having a lot of fun with it. Now onto my issue  :mrgreen:


I'm having an issue when I try to morph multiple paths that are separated by groups. The morph seems to be working ok, but the scale of the resulting image is very small. I'm thinking it has something to do with the svg itself but for the life of me I can't find the issue.


Any help would be greatly appreciated. Thanks!





See the Pen JbOVWM by rmarquardt (@rmarquardt) on CodePen

Link to comment
Share on other sites

  • Solution

Welcome aboard! Glad you're enjoying GSAP and the MorphSVGPlugin. 


It looks like the scaling issue is due to the fact that your authoring program applied transforms to the HTML5 artwork, so it's basically scaled to 39%:


That basically means that every point in that particular SVG element is scaled/rotated/moved according to that matrix. So if you had a line that goes from 0 to 100 (x1=0, x2=100) and that had the transform from above on it, the points would be shifted so that they're x1=58.13462, x2=184.82521. That x2 is just 100 scaled down to 39.0625% and moved 145.76271.


I see three possible solutions:

  1. Fix the artwork in your editor so that it's not scaled/transformed like that. In other words, the raw points themselves should be exactly where you want them, not scaled up/down as a group to appear at a different size. I'm not familiar with Inkscape, but I bet there's a way to do it relatively easily.
  2. Animate the scale/position of the element that you're morphing to compensate for the shift in size. In other words, if it's ending up at 40% of the size, then scale it up by 2.5. 
  3. manually do the compensation to all the points in the SVG which likely means inverting the matrix and looping through all the points to run them through the matrix and spit out the new values. This would be less fun ;)

Actually, I tried adding a scale and svgOrigin value to your tween and it gave a much better result - you could probably just tweak the values and maybe add some x/y offsets or alter the svgOrigin to get it to end up exactly where you want:

scale:1, svgOrigin:"200 200"

Does that help at all? 

  • Like 2
Link to comment
Share on other sites

  • 4 weeks later...

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.