Jump to content


MorphSVG: Morphing more than 2 objects not working

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

After reading the documentation on how to morph more than two objects, it seemed like the code wasn't any much longer.
However I'm wondering if I'm missing anything within my code that is preventing that, as the shapes only morph from the first to the second and gets stuck there. It doesn't move on to the third shape.


Thank you - I really appreciate it!

TweenMax.to(pink, 2, {morphSVG:"#red", fill:"#ED1C24"}, "+=1")
.to(pink, 2, {morphSVG:"#black", fill:"#000000"}, "+=1");

See the Pen pgKEQP by anon (@anon) on CodePen

Link to comment
Share on other sites

  • Solution

Hi axy2016  :),


You just need to switch to a timeline rather than trying to chain those tweens like you have it there. If you switch your code to this:

tl = new TimelineMax();
tl.to(pink, 2, {morphSVG:"#red", fill:"#ED1C24"}, "+=1")
.to(pink, 2, {morphSVG:"#black", fill:"#000000"}, "+=1");

it all works perfectly.



PS Here is a little pen I was goofing with recently that shows a loop of multiple morphs in the middle of other tweens.

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

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