Animating stroke-width - is it possible?

[A7DC]

Hi everyone! 

This is my first time using GSAP, and as a learning experience, I'm trying to create a clone of the Twitter heart animation, seen here.

 

I've came to a stumbling block, however, when it comes to step 6 on the above link (the hollowed-out circle). 

My initial plan was to simply create an SVG with a transparent fill-colour and then animate the width of the circle, but stroke-widths aren't animatable in GSAP (and it appears anywhere), so does anyone have any suggestions of how to create this step?

The centre of the circle needs to be transparent, so the "hacks" that have came to mind so far won't suffice. For example, creating two circles, with a smaller white one on top of a larger one to fake the hollowed-out centre (if that makes sense?). That won't work because the SVG will need to be transparent to fit on photos, for example. 

Does anyone have any ideas of how to solve this problem?

Thanks!

See the Pen bRZyyj by A7DC (@A7DC) on CodePen

[A7DC]

It appears this CSSPlugin might be able to achieve this actually, seen in

See the Pen 907579916ec09b51ff63459d6894da5e by GreenSock (@GreenSock) on CodePen

 I'll report back here if it helps me solve my issue!

 

Edit: so it works OK in Chrome, but in Safari (OSX) the animation stutters - especially when you slow down the animation. Is this a bug?

[PointC]

Hi @A7DC

 

Welcome to the forum.

 

You can animate the strokeWidth, but since the stroke is center aligned, it's probably not going to be the effect you want. I'd recommend using the attribute plugin and animating the radius of the circle. Something like this:

 

TweenMax.to(yourCircle, 0.25, {attr:{r:50}})

 

More info about the attr plugin:

https://greensock.com/docs/Plugins/AttrPlugin

 

Happy tweening.

[A7DC]

Hey @PointC, thanks for that! ?

[PointC]

Happy to help - that's how we roll in the GreenSock neighborhood. 

 

Let us know if you have any other GSAP questions.

 

Happy tweening.