Hi tweeners! I'm sure this is an easy one due to the skill level of GreenSock members there are 3 svg's in the pen, the last svg (#dot) tweens morphSVG to the 2 svg (#brush), the thing is that it morphs and goes to another coordinates... way to far. How to morphSVG a multipath SVG (#brush) and stay in the same place. THX!!!
See the Pen RrEMav by caemostajo (@caemostajo) on CodePen
Carl & Jonathan - thanks very much for the kind words.
@caemostajo
I've made another pen to help you understand this behavior a bit better. There are two timelines and two SVGs that are nearly identical. The first one has a shape in each corner and you can see the morph target not only assumes the shape, but the positioning of the new path.
The second one is the same except all paths are centered so you get a morph with no position changes.
I've also added a toggle so you c