CheJim

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.

Hi, 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.