Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
A7DC

Animating stroke-width - is it possible?

Recommended Posts

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

:)

  • Like 6
Link to comment
Share on other sites

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

 

Let us know if you have any other GSAP questions.

 

Happy tweening.

:)

  • Like 4
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.
×