Jump to content


Customise morph with MorphSVGPlugin

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



See attached codepen demo for an example of what I'm working with. Imagine the button is at the bottom of a form and the animation that happens on click will run while the form is being processed.

Onclick the circle morphs into two dots which rotate in a loop 3 times and then morph back to the circle.


The morph from a circle to two dots is what I'd like to be able to alter and am currently struggling with. At the moment the circle visually morphs to one of the dots and the other dot grows from nothing.


I'd like to be able to have the circle kind of split in two and each half morph to a dot.


I looked at and experimented with the shapeIndex property and findShapeIndex function but didn't have any luck with either.


I'm pretty new to GSAP and working with SVG in general and at this point am unsure what I should try next. Could I construct my SVG better? Should I persist with shapeIndex and findShapeIndex?

Any pointers appreciated.

See the Pen EyGLwp by CheJim (@CheJim) on CodePen

Link to comment
Share on other sites

  • Solution

Good question. You could just alter your SVG artwork so that the single big circle is actually composed of two paths internally (but visually it looks like one). That way, MorphSVGPlugin doesn't have to fabricate an extra path to match up with the other circle. 


Here's my edited version for you: http://codepen.io/GreenSock/pen/186fec3bf0e30b3cab4a81b6f691f4a1/


Notice I had to set a shapeIndex as an array that has a number for each sub-path because one of the paths wasn't quite morphing in the way I wanted. I could have just edited the path data instead, but I found it easier to just tweak the shapeIndex. Totally up to you. 


Oh, and I tweaked the easing and cleaned up a few other minor things to simplify your animation code a tad. 


Does that help? 

  • Like 2
Link to comment
Share on other sites

Thanks Jack,


That's really useful for me. And I like your easing better than my designer on this project.


Also, loving GSAP so far. Have been very pleasantly surprised at how quickly I've been able to able to pick it up and achieve the effects I want. :)

  • Like 1
Link to comment
Share on other sites

Very glad to hear that you're picking things up so quickly. In no time, you'll be animating just about anything you can dream up :) Thanks for being a club member! 


Happy tweening!

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.