Trying to animate the width of a path inside an svg.

[icekomo]

 

Hello all,

I have an SVG that looks like this:

 

<svg id="search" xmlns="http://www.w3.org/2000/svg" viewBox="-150 -5 76 69" height="76" width="400">
                <path id="searchCircle" d="M56.5 29c0 14.64-11.86 26.5-26.5 26.5S3.5 43.64 3.5 29 15.36 2.5 30 2.5 56.5 14.36 56.5 29z" fill="none" stroke="#fff" stroke-width="3" stroke-miterlimit="10" />
                <path id="searchBox" fill="none" stroke="#fff" stroke-width="3.176" stroke-linecap="round" stroke-miterlimit="10" d="M3 2h54v54H3z" />
            </svg>

 

And after I SVGMorph the #searchcircle into the #searchBox shape, I would like to animate the width of the search circle, which is what I'm trying to do here.

 

var $circle = $('#searchCircle');
var $box = $('#searchBox');

var tlMain = new TimelineMax();



tlMain.to($circle, 0.25, {morphSVG:$box})
        .to($circle, 0.25, {attr:{width:300}});

 

 

I can get the morph to happen, but it seems to be ignoring the width property. I have also tried just the normal width: "300px" property as well. Not sure what I'm missing.

[icekomo]

I found this pen which solved my issue. 

See the Pen zxEwpw by GreenSock (@GreenSock) on CodePen

I tried to delete the question but had no luck.

 

[GreenSock]

Glad you figured it out. Thanks for letting us know. And it's fine to leave the question here because someone may benefit from the answer as well

 

Happy tweening!