Jump to content
Search Community

Animating stroke-width - is it possible?

A7DC test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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

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.
×
×
  • Create New...